Vite 环境变量注入&多环境适配方案示例
目标
- 支持多环境适配
- 支持构建产物与环境无关
环境变量加载
Vite 环境变量和模式
- 通过
*.loacl解决本地开发和线上环境变量不一致问题 - 多环境可通过
mode解决多环境适配问题
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略加载优先级
- 指定模式的文件（例如 .env.prod）会比通用形式的优先级更高（例如 .env）
- Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖
Vite 服务获取环境变量
可通过以下方式获取环境变量
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
const envPrefix = ['VITE_', 'S_'];
export default defineConfig(({ mode }) => {
// 获取环境变量
const env = loadEnv(mode, __dirname, envPrefix);
return {
envPrefix,
plugins: [
react()
],
}
})前端环境获取环境变量
借助 import-meta-env 提供的能力使构建产物与环境无关
具体实现如下
- 添加环境变量替换入口
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>多环境适配示例</title>
<!-- 新增 -->
<script>
globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"')
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>- 添加
.env.example
明确需要加载的环境变量清单
# .env.example
S_API_HOST=https://xx.com- 添加替换脚本
{
"scripts": {
"deploy:env": "S_API_HOST=https://test.xx.com import-meta-env -x .env.example -p dist/index.html"
},
"devDependencies": {
"@import-meta-env/cli": "^0.6.7"
}
}- 添加获取环境变量工具方法
// src/utils/env.ts
/**
* 环境变量表达式是静态转换的，必须使用完整的静态字符串来引用它们。
* 以下方式获取不到
* import.meta.env
* import.meta.env['FOO']
*/
const envMap: Record<string, string> = {
S_API_HOST: import.meta.env.S_API_HOST,
};
export const getEnvValue = (key: string): string => {
if (import.meta.env.DEV) {
return envMap[key];
}
try {
return window.import_meta_env[key] || envMap[key];
} catch (error) {
return '';
}
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent