Vite 中如何使用 import.meta.env？

推荐答案

在 Vite 中，import.meta.env 是一个用于访问环境变量的对象。你可以通过它来获取在 .env 文件中定义的环境变量。以下是如何使用 import.meta.env 的示例：

// 访问环境变量
const apiUrl = import.meta.env.VITE_API_URL;

console.log(apiUrl); // 输出: https://api.example.com

在 .env 文件中，你可以定义环境变量：

VITE_API_URL=https://api.example.com

本题详细解读

1. import.meta.env 的作用

import.meta.env 是 Vite 提供的一个特殊对象，用于访问在构建时或运行时定义的环境变量。这些环境变量通常存储在 .env 文件中，或者通过命令行参数传递。

2. 环境变量的命名规则

在 Vite 中，环境变量的命名需要遵循特定的规则：

• 必须以 VITE_ 开头，例如 VITE_API_URL。
• 只有以 VITE_ 开头的变量才会被 Vite 暴露给客户端代码。

3. 使用 .env 文件

你可以在项目根目录下创建 .env 文件来定义环境变量。Vite 会自动加载这些文件中的变量。

例如，.env 文件内容如下：

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

在代码中，你可以通过 import.meta.env 访问这些变量：

const apiUrl = import.meta.env.VITE_API_URL;
const debugMode = import.meta.env.VITE_DEBUG;

console.log(apiUrl); // 输出: https://api.example.com
console.log(debugMode); // 输出: true

4. 环境变量的优先级

Vite 会按照以下顺序加载环境变量：

1. .env 文件中的变量。
2. .env.[mode] 文件中的变量（例如 .env.development 或 .env.production）。
3. 命令行参数传递的变量。

5. 注意事项

• 安全性：不要在客户端代码中暴露敏感信息，如 API 密钥或数据库密码。Vite 只会暴露以 VITE_ 开头的变量。
• 类型安全：如果你使用的是 TypeScript，可以通过在 src 目录下创建 env.d.ts 文件来为 import.meta.env 提供类型定义：

interface ImportMetaEnv {
  VITE_API_URL: string;
  VITE_DEBUG: boolean;
}

这样可以在开发过程中获得更好的类型提示和错误检查。