创建项目命令

npm init vite@latest

配置开发环境，生产环境，测试环境

1、根目录下新建.env.development和.env.production

文件名必须是这样定义，否则读取不到

其中写node环境变量和其它变量
其它变量必须要以VITE_开头

NODE\_ENV = "development"
VITE\_BASE\_URL = "<http://127.0.0.1:3333>"

2、在tsconfig.json中添加"types": \[ "vite/client" ]，用来提供import.meta.env 上Vite注入的环境变量的类型定义

"compilerOptions": {
    "types": \[  "vite/client" ]
}

3、在src目录下env.d.ts中添加以下代码，可以在在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示

interface ImportMetaEnv {
    readonly VITE\_BASE\_URL: string
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

踩坑：如果不配置2、3点的话的话可能就会出现以下ts错误提示：类型ImportMetaEnv上不存在属性"env"。 如果配置后仍然报错，需要重启编辑器

4、使用import.meta.env.VITE_BASE_URL获取环境变量

console.log(import.meta.env.VITE\_BASE\_URL)
// <http://127.0.0.1:3333>

5、通过--mode development和--mode production在package.json中配置模式

"scripts": {
    "dev": "vite --mode development --open",
    "build": "vue-tsc --noEmit && vite build",
    "build:prod": "vue-tsc --noEmit && vite build --mode production",
    "preview": "vite preview",
},

配置 @ 表示 src 目录

1、下载需要的包 @types/node

yarn add @types/node
npm install @types/node

2、配置 tsconfig.json文件

• 在 compilerOptions 配置项中增加 baseUrl 及 paths 配置

{
    "compilerOptions": {
        // ...省略其它配置项
        "baseUrl": ".",
        "paths": {
            "@/*": [ "src/*" ]
        }
    }
}

3、在 vite.config.ts 文件中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias:{
            "@": resolve(__dirname, "./src")
        }
    }
})