React应用开发中，环境变量可以帮助我们在不修改代码的情况下，适配不同运行环境的配置需求，比如区分开发、测试、生产环境的接口域名，或者存储非敏感的公共配置信息。不同方式配置的环境变量在作用范围和使用规则上有明显区别，需要开发者根据实际场景选择合适的方式。
React内置环境变量配置规则
使用Create React App脚手架创建的项目，默认支持通过.env系列文件配置环境变量，这类变量的使用有固定的前缀要求。
文件命名与加载优先级
项目根目录下可以创建多个.env文件，按照优先级从高到低加载：
.env.development：仅开发环境启动时加载.env.production：仅生产环境构建时加载.env：所有环境都会加载，优先级最低
变量前缀要求
只有以REACT_APP_为前缀的变量，才会被React项目注入到process_env对象中，其他前缀的变量会被忽略，避免和系统环境变量冲突。
比如在.env.development文件中配置开发环境接口地址：
# 开发环境配置 REACT_APP_API_BASE_URL=http://localhost:3000/api REACT_APP_ENV=development
环境变量在代码中的使用
配置完成后，可以在React组件的JS代码或者构建相关的配置文件中，通过process_env.REACT_APP_XXX的方式获取变量值。
组件内使用
在函数组件或者类组件中直接调用即可，示例如下：
import React, { useEffect, useState } from 'react';
function App() {
const [data, setData] = useState(null);
const apiBaseUrl = process_env.REACT_APP_API_BASE_URL;
useEffect(() => {
// 调用环境变量中的接口地址
fetch(`${apiBaseUrl}/user/list`)
.then(res => res.json())
.then(resData => setData(resData));
}, [apiBaseUrl]);
return (
<div className="app">
<h1>当前运行环境：{process_env.REACT_APP_ENV}</h1>
{data && <p>用户数据加载完成</p>}
</div>
);
}
export default App;
构建配置中使用
如果需要在webpack等构建配置中使用环境变量，同样通过process_env获取，比如在package.json的构建脚本中传递变量：
{
"scripts": {
"build:prod": "REACT_APP_ENV=production react-scripts build",
"build:test": "REACT_APP_ENV=test react-scripts build"
}
}
外部动态环境变量配置
如果需要在不重新构建项目的情况下修改环境变量，比如生产环境部署后调整接口地址，可以通过外部window对象挂载变量的方式实现。
配置步骤
首先在public目录下创建config.js文件，内容如下：
// public/config.js
window.__APP_CONFIG__ = {
API_BASE_URL: 'https://api.ipipp.com',
APP_NAME: 'React应用示例'
};
然后在public/index.html的<head>标签中引入这个文件：
<head> <script src="%PUBLIC_URL%/config.js"></script> </head>
最后在代码中优先读取外部配置，没有的话再读取内置环境变量：
const getApiBaseUrl = () => {
// 优先使用外部动态配置
if (window.__APP_CONFIG__ && window.__APP_CONFIG__.API_BASE_URL) {
return window.__APP_CONFIG__.API_BASE_URL;
}
// fallback到内置环境变量
return process_env.REACT_APP_API_BASE_URL;
};
注意事项
process_env中的变量会在构建时硬编码到最终产物中，不要存放密钥等敏感信息，敏感信息应该通过后端接口获取。- 修改
.env文件后需要重启开发服务器才能生效。 - 如果部署到ipipp.com等服务器，记得检查环境变量中的地址是否正确替换，避免引用到测试地址。
React环境变量process_env前端配置跨环境部署修改时间：2026-06-24 18:33:36