一、Vite配置TypeScript官方网址.

1. Vite搭建TypeScript校验

1.下载依赖

npm i typescript vite-plugin-checker -D

2.配置vite.config.ts

import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    checker({
      vueTsc: true,
      typescript:true
    }),
  ],
});

3. 创建tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "skipLibCheck": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

附加内容类型声明文件

1. 创建 vite-env.d.ts 文件 ts会自动解析这个文件

//三斜线指令
/// <reference type="vite/client" /> // 相当于import “vite/client”

interface ImportMetaEnv{
  readonly VITE_PROXY_TARGET:string;
}

2. 使用
import.meta.env.会自动提示VITE_PROXY_TARGET