Vue3 + vite 配置env环境变量
1. 添加环境变量配置文件
touch .env.development
touch .env.production
touch .env.test
基本内容
VITE_MODE_ENV=development
VITE_APP_TITLE=开发环境
VITE_API_BASE_URL=''
需要VITE前缀才可识别该环境变量
export default defineConfig({
envPrefix: 'XX' // 可通过配置该变量修改为你需要的前缀
})
envPrefix
默认放在项目根目录下，如需保存至制定目录
// 修改vite.config.ts
export default defineConfig({
envDir: './src/env' // 添加该条内容即可
})
2. 添加ts智能提示
// 修改 env.d.ts
// 添加入下内容
interface ImportMetaEnv {
readonly VITE_APP_TITLE: string
// 更多环境变量...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
3. 使用模式 以及 vue中获取环境变量值
通过配置 package.json 修改 scripts
vite build --mode dev
vue中获取环境参数的值
console.log(import.meta.env.VITE_API_BASE_URL)