环境变量与多环境配置
同一份代码要跑在开发、测试、预发布、生产四套环境：接口地址、开关、特性的取值各不相同。标准做法是环境变量：Vite 读 .env.development / .env.production 等文件，以 import.meta.env.VITE_XXX 暴露给代码。
注意编译后的静态文件里变量是“写死”的——线上发现问题想改配置，必须重新构建。需要运行时动态配置的场景（如部署到不同客户私有化环境），约定在 public 放一个 config.js 由页面运行时加载。
- 文件优先级：.env < .env.[mode] < .env.local（local 不提交，放个人密钥）
- 只有 VITE_ 前缀的变量才暴露给前端代码；其余是 Node 构建期用的
- 敏感信息（key、密码）绝不放环境变量打进包——前端产物对用户完全透明
配置
// .env.development // VITE_API_BASE = http://localhost:3000 // VITE_ENABLE_MOCK = true // .env.production // VITE_API_BASE = https://api.example.com // VITE_ENABLE_MOCK = false // 代码里使用 const apiBase = import.meta.env.VITE_API_BASE; // 编译期替换为字符串 if (import.meta.env.DEV) console.log('开发模式'); // 运行时配置（弥补静态包不能换配置的短板） // public/config.js: window.APP_CONFIG = { apiBase: 'https://api.b.com' } // index.html 里先于包加载: <script src="/config.js"></script> const runtimeBase = window.APP_CONFIG?.apiBase || apiBase; // 打包命令指定模式：vite build --mode staging → 读 .env.staging
本节要点环境变量按文件分层（VITE_ 前缀才暴露）；需要部署后动态配置时用运行时 config.js。
