这是Vite 的环境变量机制。原理：
1. Vite 如何区分环境
Vite 通过启动命令来区分：
npm run dev→ 设置import.meta.env.DEV = truenpm run build→ 设置import.meta.env.PROD = true
// Vite 内部实现（简化版）
const isDev = command === 'serve'; // dev 命令
const isProd = command === 'build'; // build 命令
// 注入到代码中的内置变量
import.meta.env.DEV = isDev;
import.meta.env.PROD = isProd;
import.meta.env.MODE = command; // 'development' | 'production' 等
2. .env 文件加载优先级
Vite 按以下优先级加载环境变量（高的覆盖低的）：
例子：
运行
npm run dev（mode = development）：加载
.env→.env.local→.env.development→.env.development.local
运行
npm run build（mode = production）：加载
.env→.env.local→.env.production→.env.production.local
3. 变量注入到代码
Vite 在构建时会将 VITE_ 前缀的变量替换为实际值：
源代码：
const baseURL = import.meta.env.VITE_API_BASE;
开发环境运行时：
const baseURL = "http://175.178.59.129:8000"; // 直接替换
生产环境构建后：
const baseURL = "http://localhost:8000"; // 直接替换
4. package.json 中的配置
{
"scripts": {
"dev": "vite", // 默认 mode = development
"build": "vite build", // 默认 mode = production
"preview": "vite preview"
}
}
你也可以自定义 mode：
"dev:test": "vite --mode test" // 会加载 .env.test
总结
┌─────────────────────────────────────────────────────────────┐
│ npm run dev │
│ ↓ │
│ import.meta.env.DEV = true │
│ import.meta.env.MODE = "development" │
│ ↓ │
│ 加载 .env.development.local 中的 VITE_API_BASE │
│ ↓ │
│ 替换为: "http://175.178.59.129:8000" │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ npm run build │
│ ↓ │
│ import.meta.env.PROD = true │
│ import.meta.env.MODE = "production" │
│ ↓ │
│ 加载 .env.production 中的 VITE_API_BASE │
│ ↓ │
│ 替换为: "http://localhost:8000" │
└─────────────────────────────────────────────────────────────┘
注意： 只有 VITE_ 前缀的变量才会暴露给客户端代码，其他变量只在服务端可用（这是出于安全考虑）。