在 vite 项目中配置环境变量前缀，需要在项目根目录创建 .env 文件，并在变量名前加上 vite_ 前缀。vite 默认只暴露以 vite_ 开头的变量到客户端代码中，其他变量会被忽略。这样做的结果是，你可以在前端代码中通过 import.meta.env 安全地访问这些配置，而不会泄露服务器端的敏感信息。
如何区分开发环境和生产环境的变量配置
要区分不同环境，需要创建带有后缀的 .env 文件，如 .env.development 和 .env.production。Vite 会根据启动命令自动加载对应的文件。例如，运行 npm run dev 会加载 .env.development，而运行 npm run build 会加载 .env.production。这种机制允许你在不同环境下使用不同的 API 地址或功能开关。
const fs = require('fs');
// 模拟 .env.development 内容
const devEnv = 'VITE_API_URL=http://localhost:3000/api\nSECRET_KEY=dev_secret';
fs.writeFileSync('.env.development', devEnv);
// 模拟 .env.production 内容
const prodEnv = 'VITE_API_URL=https://api.example.com\nSECRET_KEY=prod_secret';
fs.writeFileSync('.env.production', prodEnv);
console.log('Environment files created.');
未添加 VITE_ 前缀的变量会发生什么
如果变量没有 VITE_ 前缀，它们在客户端代码中是不可见的。尝试访问这些变量会导致 undefined。这是 Vite 的安全设计，防止敏感数据（如数据库密码）被打包到前端代码中。只有以 VITE_ 开头的变量才会被注入到 import.meta.env 对象中。
掌握 ES6+ 特性，包括 async/await、解构、扩展运算符、箭头函数、Promise、模块、迭代器、生成器以及函数式编程模式，编写简洁高效的 Java
立即学习“Java免费学习笔记（深入）”；
// main.js console.log(import.meta.env.VITE_API_URL); // 输出: http://localhost:3000/api console.log(import.meta.env.SECRET_KEY); // 输出: undefined
如何在代码中正确读取已配置的环境变量
在 JavaScript 或 TypeScript 文件中，通过 import.meta.env 对象来读取变量。例如，import.meta.env.VITE_APP_TITLE 会返回 .env 文件中定义的 VITE_APP_TITLE 的值。确保变量名完全匹配，包括大小写。如果变量不存在，返回值将是 undefined。这种方式提供了类型安全的访问（在 TS 中），并确保了只有预定义的变量才能被使用。
