在 vite 项目中配置环境变量，核心做法是在项目根目录创建以 .env 开头的文件，并在其中定义以 vite_ 为前缀的变量。vite 会自动加载这些文件，并通过 import.meta.env 对象在客户端代码中暴露这些变量。需要注意的是，只有带 vite_ 前缀的变量才会被嵌入到客户端包中，其他变量仅在服务端构建时可用。
不同环境下的变量加载优先级是怎样的
Vite 根据运行模式（development 或 production）和具体命令自动加载对应的 .env 文件。默认情况下，.env.local 文件会被忽略并加入 .gitignore，用于存放敏感信息；而 .env.development 和 .env.production 则分别对应不同的构建场景。加载顺序遵循特定规则：本地文件优先级高于通用文件，且生产环境文件会覆盖开发环境中的同名变量。
// .env VITE_APP_TITLE=MyApp // .env.development VITE_API_URL=http://localhost:3000/api // .env.production VITE_API_URL=https://api.example.com/v1 // main.js console.log(import.meta.env.VITE_API_URL) // 开发环境输出: http://localhost:3000/api // 生产环境输出: https://api.example.com/v1
如何确保变量类型正确且避免未定义错误
所有通过 import.meta.env访问的环境变量在运行时都是字符串类型。如果业务逻辑需要数字或布尔值，必须显式进行类型转换。此外，如果引用的变量未在 .env 文件中定义，import.meta.env 将返回 undefined，这可能导致运行时错误。建议在代码中使用空值合并运算符或提供默认值来增强健壮性。
立即学习“Java免费学习笔记（深入）”；
// utils/config.js
const port = Number(import.meta.env.VITE_PORT) || 5173;
const isDebug = import.meta.env.VITE_DEBUG === 'true';
const apiUrl = import.meta.env.VITE_API_URL ?? 'http://localhost:8080';
export { port, isDebug, apiUrl };
为什么某些变量在浏览器控制台不可见
这是由 Vite 的安全机制决定的。只有以 VITE_ 开头的变量才会被注入到客户端代码中。如果你定义了不带此前缀的变量（如 SECRET_KEY），它们仅在 Node.js 服务端构建脚本中可用，而在浏览器端的 import.meta.env 中将无法获取。这种设计防止了敏感信息意外泄露到前端代码中。
