vue3+vite+ts的环境变量配置

原理:

vite使用dotenv从环境目录加载环境文件，默认情况下为根目录的环境文件

环境命名：创建文件

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

• 开发环境：mode为dev，文件名称为.env.dev
• 测试环境：mode为test，文件名称为.env.test
• 生产环境：mode为prod，文件名称为.env.prod

env文件内配置：

//.env.dev 举例
VITE_API_DOMAIN = 'http://aaa.com:8080/api'//测试环境地址

必须以VITE_开头

环境变量的使用

const a = import.meta.env.VITE_API_DOMAIN  
console/log(a)  //'http://aaa.com:8080/api'

多环境配置:

package.json中配置启动脚本，使用配置

"scripts": {
  "dev": "vite --mode dev",
  "test": "vite --mode test",
  "prod": "vite --mode prod",
  "build": "run-p type-check \"build-only {@}\" --",
  "preview": "vite preview",
  "build-only": "vite build",
  "type-check": "vue-tsc --build --force"
},

关于TypeScript 的智能提示:

在根目录创建vite-env.d.ts文件

 /// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_DOMAIN: string;
  // 更多环境变量...
}