Vite 如何从 env 文件加载环境变量？

在 Vite 中，从 .env 文件加载环境变量是一个简单而直接的过程。Vite 默认情况下支持通过在项目根目录中放置 .env 文件来加载环境变量。以下是步骤和细节：

步骤 1：创建 .env 文件

首先，在项目的根目录创建一个名为 .env 的文件。如果需要区分不同的环境，如开发环境、生产环境等，可以创建多个文件，例如：

• .env：默认环境变量文件，所有环境都会加载。
• .env.local：本地开发环境专用变量文件，不会被 Git 跟踪。
• .env.development：仅在开发环境下使用。
• .env.production：仅在生产环境下使用。

步骤 2：定义环境变量

在 .env 文件中，你可以定义环境变量。这些环境变量需要以 VITE_ 作为前缀才能在项目中被 Vite 识别。例如：

env
# .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vite App

步骤 3：在项目中使用环境变量

在你的 JavaScript 或 TypeScript 代码中，可以通过 import.meta.env 对象访问这些环境变量，如下：

javascript
console.log(import.meta.env.VITE_API_URL); // 输出: https://api.example.com
console.log(import.meta.env.VITE_APP_TITLE); // 输出: My Vite App

示例

假设我们正在开发一个需要调用 API 的前端应用，我们可能希望根据不同的环境使用不同的 API 端点。在这种情况下，我们可以这样设置环境变量：

.env.development

env
VITE_API_URL=https://dev.api.example.com

.env.production

env
VITE_API_URL=https://api.example.com

然后在代码中：

javascript
async function fetchData() {
  const apiUrl = import.meta.env.VITE_API_URL;
  const response = await fetch(`${apiUrl}/data`);
  return response.json();
}

fetchData().then(data => {
  console.log(data);
});

在上述例子中，根据环境的不同，fetchData 函数会从不同的 API 端点获取数据。

注意事项

• 当改变 .env 文件时，通常需要重启 Vite 开发服务器以使新的变量生效。
• 在客户端代码中公开的所有环境变量都应谨慎处理，避免包含任何敏感信息，因为它们可以在构建的前端代码中被看到。
• 为了安全起见，.env.local 文件通常用于存放敏感信息，并应该加入 .gitignore 文件中以防止被提交到版本控制系统中。

以上回答展示了如何在 Vite 中从 .env 文件加载环境变量，并通过一个实际应用的场景来提供了一个具体例子。