本文详细阐述了如何在react应用中高效配置和使用环境变量。通过遵循特定的命名约定（`react_app_`前缀）并将其放置于react应用根目录下的`.env`文件中，开发者可以在代码中通过`process.env`对象轻松访问这些变量。教程涵盖了定义、访问示例以及重要的注意事项，如应用重启和安全考量，旨在帮助开发者构建更灵活、可配置的react应用。
在现代前端应用开发中，环境变量扮演着至关重要的角色。它们允许开发者在不修改代码的情况下，根据不同的部署环境（如开发、测试、生产）调整应用程序的行为。例如，后端API的URL、第三方服务的密钥或某些功能开关等，都非常适合通过环境变量进行管理。本教程将指导您如何在React应用程序中有效地配置和使用这些环境变量。
React应用中环境变量的机制
对于使用Create React App (CRA) 或类似构建工具创建的React项目，环境变量的集成非常便捷。核心机制在于以下两点：
- 文件位置： 环境变量通常定义在一个名为.env的文件中。对于基于Create React App的项目，该文件应放置在React应用根目录（例如，在您的frontend文件夹内），而不是整个项目的共享config文件夹中，除非您配置了自定义的构建流程来查找。
- 命名约定： 为了避免与系统环境变量冲突，React强制要求所有客户端可用的环境变量必须以REACT_APP_作为前缀。没有此前缀的变量将不会被React的构建过程识别并注入到客户端代码中。
配置环境变量
首先，确保您的.env文件位于React应用的根目录下。例如，如果您的React应用在frontend文件夹中，那么.env文件应位于frontend/.env。
在.env文件中，按照REACT_APP_前缀的约定定义您的变量。例如：
# frontend/.env REACT_APP_API_BASE_URL=http://localhost:5000/api REACT_APP_FEATURE_FLAG_ANALYTICS=true REACT_APP_APP_VERSION=1.0.0
重要提示： .env文件中的变量名和值之间不能有空格。
在React应用中访问环境变量
一旦环境变量在.env文件中定义并遵循了命名约定，您就可以在React组件或任何JavaScript文件中通过process.env对象来访问它们。
// src/App.js 或其他组件/文件中
import React from 'react';
function App() {
const apiBaseUrl = process.env.REACT_APP_API_BASE_URL;
const analyticsEnabled = process.env.REACT_APP_FEATURE_FLAG_ANALYTICS === 'true'; // 环境变量值默认为字符串
console.log('API Base URL:', apiBaseUrl);
console.log('Analytics Enabled:', analyticsEnabled);
console.log('App Version:', process.env.REACT_APP_APP_VERSION);
return (
<div>
<h1>React 应用配置</h1>
<p>API 地址: {apiBaseUrl}</p>
<p>分析功能启用: {analyticsEnabled ? '是' : '否'}</p>
<p>应用版本: {process.env.REACT_APP_APP_VERSION}</p>
</div>
);
}
export default App;示例输出：
API Base URL: http://localhost:5000/api Analytics Enabled: true App Version: 1.0.0
关键注意事项
- 应用重启： 每当您添加、修改或删除.env文件中的环境变量时，必须重启您的React开发服务器（例如，通过停止npm start进程并重新运行它）。这是因为环境变量是在构建时被注入到应用程序中的，而不是在运行时动态读取。
- 安全考量： 任何通过REACT_APP_前缀定义的环境变量，在应用程序被打包和部署后，都将是公开可见的。这意味着它们会被嵌入到客户端的JavaScript代码中，用户可以通过浏览器开发者工具轻松查看。因此，绝不能将敏感信息（如私钥、API密钥等）存储在客户端可访问的环境变量中。 敏感信息应始终在后端安全存储和处理。
-
不同环境的配置： 您可以创建多个.env文件来为不同的环境提供不同的配置，例如：
- .env：默认配置
- .env.development：开发环境配置
- .env.production：生产环境配置
- .env.test：测试环境配置 Create React App会根据NODE_ENV变量自动加载相应的.env文件。例如，在开发模式下（NODE_ENV=development），会优先加载.env.development，然后是.env。
- 构建时注入： React的环境变量是在构建阶段（npm run build）被“硬编码”到最终的JavaScript包中的。这意味着一旦应用构建完成，其环境变量值就固定了。如果需要在部署后更改环境变量，通常需要重新构建应用程序。
总结
通过遵循REACT_APP_前缀约定并将.env文件放置在正确的React应用根目录下，您可以轻松地在React应用程序中管理和使用环境变量。这不仅提高了应用程序的灵活性和可配置性，也使得在不同部署环境之间切换变得更加简单。然而，务必牢记客户端环境变量的公开性，避免在此处存储任何敏感信息。合理利用环境变量，将使您的React项目更加健壮和易于维护。
