在 vite 项目中配置多环境，核心做法是利用 .env 文件配合命令行参数 --mode 来隔离不同环境的变量。vite 会自动加载与当前模式匹配的环境文件，并通过 import.meta.env 对象暴露给前端代码，从而实现开发、测试和生产环境的差异化配置。
Vite 如何根据模式加载环境变量
Vite 通过 --mode 参数决定加载哪些 .env 文件。默认情况下，运行 vite dev 或 vite build 时，模式为 development 和 production。你可以通过修改 package.json 中的脚本命令，传入自定义的模式名称（如 staging），Vite 就会优先加载 .env.staging 文件。所有以 VITE_ 开头的变量都会被注入到 import.meta.env 中，未加前缀的变量仅在后端构建脚本中可用。
{
"scripts": {
"dev": "vite",
"build": "vite build",
"build:staging": "vite build --mode staging"
}
}
上述配置使得执行 npm run build:staging 时，项目会使用 .env.staging 中的变量覆盖默认值。注意，.env.development 和 .env.production 是 Vite 内置的特殊模式文件，始终会被加载，而自定义模式的文件仅在指定模式时加载。
如何在代码中安全访问环境变量
在 Vue 或 React 等单页应用中，直接通过 import.meta.env.VITE_API_URL 访问变量是最标准的方式。由于 Vite 在构建时会静态替换这些变量，因此确保变量名拼写正确且以 VITE_ 开头至关重要。如果变量不存在，import.meta.env 中对应的键将为 undefined，不会报错，但可能导致运行时逻辑异常。建议在代码中提供默认值或使用类型检查工具（如 TypeScript）来约束可用变量。
// main.js 或 index.js
const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000/api';
console.log('API Base URL:', apiUrl);
这段代码展示了如何读取环境变量并提供降级方案。当 VITE_API_URL 未定义时，使用本地地址作为默认值。这种方式保证了在不同环境下部署时，应用仍能保持基本的连通性。同时，import.meta.env.MODE 可用于判断当前运行环境，从而执行特定的业务逻辑，例如在测试环境中禁用某些敏感操作。
生产构建时环境变量如何处理
在生产环境中，所有 import.meta.env 中的变量都会在构建阶段被替换为字面量字符串，这意味着环境变量会直接嵌入到最终的 JavaScript 文件中。因此，任何暴露在 import.meta.env 中的变量都是公开的，不应包含敏感信息如数据库密码或私钥。Vite 的构建优化会将这些常量内联，减少运行时开销，但也增加了信息泄露的风险。开发者需严格审查 .env.production 中的内容，确保只包含必要的非敏感配置。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
