如何使用 Vite 加载 .env 变量 | React 应用程序

2024-03-10 16:56:07

在 React 应用中使用 Vite 加载 .env 变量

引言

在 React 应用程序中使用 Vite 构建时，加载 .env 文件中的变量非常有用，因为它使我们能够安全地存储敏感信息，例如 API 密钥和数据库凭据，同时将它们与我们的代码分开。本文将指导您如何使用 Vite 加载 .env 变量，并提供两种方法，一种适用于 Vite 2.9 及更高版本，另一种适用于 Vite 2.8 及更早版本。

方法 1：使用 import.meta.env

适用版本： Vite 2.9 及更高版本

步骤：

安装插件： 安装 @vitejs/plugin-env-compat 插件。
配置插件： 在 vite.config.js 文件中配置 env-compat 插件。
使用变量： 在组件中使用 import.meta.env 对象访问 .env 变量。

示例：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import envCompat from '@vitejs/plugin-env-compat';

export default defineConfig({
  plugins: [react(), envCompat()]
});

// 组件中
import.meta.env.VITE_API_KEY // 获取 .env 文件中的 VITE_API_KEY

方法 2：使用 process.env

适用版本： Vite 2.8 及更早版本

步骤：

安装插件： 安装 vite-plugin-dotenv 插件。
配置插件： 在 vite.config.js 文件中配置 dotenv 插件。
使用变量： 在组件中使用 process.env 对象访问 .env 变量。

示例：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dotenv from 'vite-plugin-dotenv';

export default defineConfig({
  plugins: [react(), dotenv()]
});

// 组件中
process.env.VITE_API_KEY // 获取 .env 文件中的 VITE_API_KEY

处理空值

如果 .env 文件中不存在变量，则 import.meta.env 和 process.env 返回 undefined。为了避免此问题，可以在 Vite 配置中设置默认值：

// vite.config.js
export default defineConfig({
  define: {
    'process.env.VITE_API_KEY': '"YOUR_API_KEY"'
  }
});

SEO 优化

关键词：

Vite
React
.env
环境变量
Vite 2.9
Vite 2.8
import.meta.env
process.env
Vite 插件
vite-plugin-dotenv
vite-plugin-env-compat

摘要：

了解如何在 React 应用程序中使用 Vite 加载 .env 文件中的变量。我们提供了两种方法：一种适用于 Vite 2.9 及更高版本，另一种适用于 Vite 2.8 及更早版本。通过添加默认值，我们确保即使 .env 文件中不存在该变量，也能访问变量。这对于保护敏感信息和简化配置非常有用。

结论

通过使用 Vite 加载 .env 变量，您可以安全地存储和访问敏感信息，同时保持代码的可读性和可维护性。这在构建安全且可靠的 React 应用程序时非常重要。

常见问题解答

如何配置 .env 文件？
将您的敏感变量放入 .env 文件中，该文件与您的应用程序同级。请确保将文件保持为 .env，而不是 .env.example。
我可以看到 .env 文件中的变量值吗？
否，Vite 会隐藏 .env 文件中的变量值，因此它们在本地或生产环境中都是安全的。
我可以访问 .env 文件中的所有变量吗？
是的，您可以访问 .env 文件中定义的所有变量。
我可以在生产环境中使用此技术吗？
是的，您可以在生产环境中安全地使用此技术。
有哪些替代方法来加载 .env 变量？
您还可以使用其他方法，例如 dotenv-webpack 插件或手动将变量加载到 window 对象中。然而，使用 Vite 提供的这些方法更加方便和安全。