本教程详细介绍了如何在react js应用中配置和访问外部环境变量。核心在于遵循react_app_命名约定，并通过process.env对象在代码中安全地获取这些变量。文章还提供了示例代码，并强调了在添加新变量后重启应用的重要性，确保开发者能够高效且规范地管理前端配置。
引言：React应用中的环境变量管理
在现代Web开发中，前端应用经常需要根据不同的部署环境（如开发、测试、生产）使用不同的配置参数，例如API接口地址、认证密钥或功能开关等。这些参数通常被称为环境变量。在React JS应用中，尤其是在使用Create React App (CRA) 构建的项目中，管理和访问这些外部配置变量是开发过程中的一个重要环节。本指南将详细阐述如何在React应用中正确配置和使用这些环境变量，即使它们存储在项目结构中的非标准位置。
React环境变量的核心机制
Create React App 提供了一种内置机制来处理环境变量，使其能够在JavaScript代码中被访问。其核心规则和访问方式如下：
- 命名约定： 为了防止潜在的安全风险并明确区分系统环境变量，所有要在React前端应用中使用的自定义环境变量都必须以REACT_APP_作为前缀。例如，API_URL应被命名为REACT_APP_API_URL。
- 访问方式： 在React应用的代码中，可以通过全局的process.env对象来访问这些环境变量。例如，要获取REACT_APP_API_URL的值，可以使用process.env.REACT_APP_API_URL。
配置.env文件
首先，您需要创建或编辑一个.env文件来定义您的环境变量。虽然原始问题中提到.env文件位于config文件夹内，但为了确保Create React App能够识别并加载这些变量，推荐将.env文件放置在React应用的根目录（即package.json文件所在的目录）或整个项目的根目录。
在.env文件中，按照键=值的格式定义变量，并严格遵守REACT_APP_的命名约定：
# .env 文件示例 REACT_APP_COUNT=0 REACT_APP_DOMAIN_NAME=stackoverflow REACT_APP_API_BASE_URL=https://api.example.com/v1
提示： 如果您的项目结构复杂，并且.env文件确实需要放置在非标准位置，您可能需要借助第三方库（如dotenv）或自定义构建配置来确保React应用能够加载到这些变量。然而，对于标准的Create React App项目，将其放置在项目根目录通常是最简便有效的方法。
在React应用中访问环境变量
一旦.env文件配置完毕，并且您的React应用开发服务器正在运行（或已重新启动），您就可以在任何React组件或JavaScript模块中访问这些变量了。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
import React from 'react';
function App() {
// 访问环境变量
const count = process.env.REACT_APP_COUNT;
const domainName = process.env.REACT_APP_DOMAIN_NAME;
const apiBaseUrl = process.env.REACT_APP_API_BASE_URL;
console.log('当前计数:', count);
console.log('域名:', domainName);
console.log('API基地址:', apiBaseUrl);
return (
<div>
<h1>React环境变量示例</h1>
<p>计数: {count}</p>
<p>域名: {domainName}</p>
<p>API基地址: {apiBaseUrl}</p>
</div>
);
}
export default App;运行上述代码，您将在浏览器控制台和页面上看到从.env文件加载的变量值。
重要注意事项
在使用React环境变量时，请务必注意以下几点：
- 应用重启： 每次您在.env文件中添加、修改或删除环境变量后，都必须重启您的React开发服务器（例如，通过npm start或yarn start命令），以确保新的变量被正确加载。仅仅刷新浏览器是无效的。
- 安全性考量： 客户端环境变量（即在前端代码中可访问的变量）在构建后会被嵌入到JavaScript文件中，这意味着它们对最终用户是可见的。因此，切勿在这些变量中存储任何敏感信息，例如数据库密码、私有API密钥或任何不应暴露给公众的数据。敏感信息应始终在后端安全地处理。
- 构建时注入： React环境变量是在应用构建时被注入到代码中的。这意味着一旦应用被构建并部署，这些变量的值就固定了。如果您需要在运行时动态更改配置，则需要考虑其他解决方案，例如从后端API获取配置或使用专门的配置服务。
- 多环境配置： Create React App 支持根据不同的环境加载不同的.env文件。例如，您可以创建.env.development用于开发环境，.env.production用于生产环境，以及.env.test用于测试环境。CRA会根据当前的NODE_ENV变量自动加载相应的.env文件。
总结
通过遵循REACT_APP_命名约定和利用process.env对象，React开发者可以有效地在应用中管理和访问环境变量。虽然将.env文件放置在项目根目录是最推荐的做法，但理解其工作原理和注意事项，如重启应用、关注安全性以及构建时注入的特性，对于构建健壮和可维护的React应用至关重要。正确地使用环境变量，能够极大地提高应用的灵活性和可配置性。
