如何在带 Vite 的 React.js 应用程序中使用环境变量

# Web 开发 # React

环境变量在现代 Web 开发中至关重要。它们允许您在源代码之外存储敏感数据、配置选项和设置。如果您将 **React.js** 与 **Vite** 结合使用，则处理环境变量将变得更加简化。在这篇博文中，我们将深入探讨如何在由 Vite 提供支持的 React.js 应用中设置和使用环境变量。

为什么要使用环境变量？

环境变量有几个好处：

安全性：将敏感信息（例如 API 密钥和机密）保留在源代码之外。

灵活性：针对不同的环境（开发、生产、测试）配置您的应用。

可维护性：避免硬编码值，使您的应用更易于维护和部署。

Vite 在遵循最佳实践的同时简化了使用环境变量的操作。

在 Vite 中设置环境变量

下面介绍了如何使用 Vite 在 React.js 应用中设置和使用环境变量：

1. 创建 Vite React 项目

首先，使用 Vite 创建一个新的 React.js 项目：

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

2. 定义环境变量

在项目根目录中创建一个 `.env` 文件。此文件将存储您的环境变量。例如：

VITE_API_URL=https://api.example.com
VITE_API_KEY=your-api-key

**重要提示**：所有变量都以 `VITE_` 作为前缀。Vite 强制执行此约定，以区分特定于应用程序的变量与其他系统级变量。

3. 在代码中访问环境变量

你可以使用“import.meta.env”访问 React.js 组件或模块中的环境变量。以下是示例：

function App() {
  const apiUrl = import.meta.env.VITE_API_URL;
  const apiKey = import.meta.env.VITE_API_KEY;

  console.log('API URL:', apiUrl);
  console.log('API Key:', apiKey);

  return (
    
      Environment Variables with Vite
      API URL: {apiUrl}
    
  );
}

export default App;

4. 添加环境特定文件

对于不同的环境，你可以创建额外的 `.env` 文件：

.env.development 用于开发特定的变量。

.env.production 用于特定于生产的变量。

.env.test 用于测试特定的变量。

Vite 会根据 `NODE_ENV` 值自动加载相应的文件。

例如，在 `.env.production` 中：

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

要构建您的应用以供生产：

npm run build

5. 保护你的 .env 文件

确保你的 `.env` 文件已添加到你的 `.gitignore`，以防止敏感数据被推送到版本控制：

# .gitignore
.env

使用环境变量的最佳实践

前缀变量：始终在变量前加上 VITE_ 以确保与 Vite 的兼容性。

将机密信息保留在客户端代码之外：避免在前端暴露敏感数据。尽可能使用服务器端代码来处理关键操作。

验证变量：使用 dotenv 或自定义脚本等库来验证所需的环境变量。

文档变量：维护 .env.example 文件来记录应用所需的变量：

# .env.example
VITE_API_URL=
VITE_API_KEY=

常见问题故障排除

变量不可用：确保您的 .env 文件正确放置在根目录中，并且变量以 VITE_ 为前缀。

值未更新：对 .env 文件进行更改后，重新启动开发服务器。

机密泄露：如果在客户端使用 .env 文件，请避免将敏感机密放入其中。请负责任地使用环境变量。

结论

环境变量是任何 Web 应用程序的重要组成部分。借助 Vite 的简单性和 React.js 的灵活性，您可以将特定于环境的配置无缝集成到您的项目中。遵循本指南可确保您的应用程序安全、可维护且适用于任何环境。

准备好使用 Vite 在 React.js 应用中实现环境变量了吗？让我们开始吧！

如果您发现本教程有帮助，请在我的 YouTube 频道上查看更多有关 React、Vite 等的深入指南。🚀

CLIS.CC