Vite 中如何配置环境变量？

推荐答案

在 Vite 中配置环境变量可以通过以下步骤实现：

1. 创建环境变量文件：在项目根目录下创建 .env 文件，或者根据环境创建 .env.development、.env.production 等文件。

2. 定义环境变量：在 .env 文件中定义环境变量，变量名必须以 VITE_ 开头，例如：

   VITE_API_URL=https://api.example.com
   VITE_DEBUG=true

3. 在代码中使用环境变量：在代码中可以通过 import.meta.env 访问这些环境变量，例如：

   const apiUrl = import.meta.env.VITE_API_URL;
   const isDebug = import.meta.env.VITE_DEBUG === 'true';

4. 配置 vite.config.js：如果需要在 Vite 配置文件中使用环境变量，可以通过 process.env 访问，例如：

   export default {
     define: {
       'process.env.VITE_API_URL': JSON.stringify(process.env.VITE_API_URL),
     },
   };

本题详细解读

1. 环境变量文件的作用

Vite 使用 .env 文件来管理环境变量。这些文件可以根据不同的环境（如开发环境、生产环境）进行配置。Vite 会自动加载 .env 文件中的变量，并将其注入到 import.meta.env 中。

2. 环境变量的命名规则

Vite 要求环境变量名必须以 VITE_ 开头，这是为了确保只有明确标记为前端可用的变量才会被暴露给客户端代码。这样可以避免敏感信息（如数据库密码）被意外暴露。

3. 在代码中使用环境变量

通过 import.meta.env，你可以在代码中访问这些环境变量。Vite 会在构建过程中将这些变量替换为实际值。例如：

console.log(import.meta.env.VITE_API_URL); // 输出: https://api.example.com

4. 在 Vite 配置文件中使用环境变量

如果你需要在 vite.config.js 中使用环境变量，可以通过 process.env 访问。Vite 不会自动将 .env 文件中的变量注入到 process.env 中，因此你需要手动处理。例如：

export default {
  define: {
    'process.env.VITE_API_URL': JSON.stringify(process.env.VITE_API_URL),
  },
};

5. 多环境配置

Vite 支持根据不同的环境加载不同的 .env 文件。例如：

• .env.development：开发环境
• .env.production：生产环境
• .env.test：测试环境

Vite 会根据当前的 NODE_ENV 自动加载对应的 .env 文件。

6. 注意事项

• 确保不要在 .env 文件中存储敏感信息，因为这些变量会被注入到客户端代码中。
• 如果需要使用非 VITE_ 前缀的变量，可以通过 dotenv 等工具手动加载。

通过以上步骤，你可以在 Vite 项目中轻松配置和使用环境变量。