Create React App生产构建部署后新增.env变量为undefined如何解决？

API 探路者

2026-9-29

核心原因

CRA 内置的 REACT_APP_* 环境变量为构建时注入类型，执行npm run build命令时，打包工具会直接把代码中所有process.env.REACT_APP_*的引用替换为.env文件中对应的静态值，最终生成的build包是已经完成变量替换的纯静态资源。因此构建完成后再新增/修改.env文件不会对已经打包好的静态代码产生任何影响，自然读取到的值为undefined。

解决方案

运行时动态配置方案（推荐）
不需要重新打包即可修改配置，适合多环境部署场景：
1. 在项目public目录下新建config.js文件，写入配置内容：
```
window.RUNTIME_CONFIG = {
  REACT_APP_DOMAIN: "example.org",
  REACT_APP_API_SERVER: "https://example.org"
}
```
1. 在public/index.html的<head>标签最顶部引入该配置文件：
```
<script src="%PUBLIC_URL%/config.js"></script>
```
1. 业务代码中所有读取环境变量的位置，替换为读取全局配置：
  把process.env.REACT_APP_DOMAIN替换为window.RUNTIME_CONFIG.REACT_APP_DOMAIN即可
  后续部署时只需要修改build目录下的config.js文件内容，刷新页面即可生效，无需重新构建。
构建前替换配置方案
如果不需要动态改配置，每次部署前将对应环境的.env文件放到项目根目录，再执行npm run build生成构建包，将构建包上传到服务器即可正常读取变量。
修改打包配置方案（不推荐）
可以通过eject CRA默认配置、或使用craco/rewired等工具修改webpack配置，禁止打包时替换process.env相关变量，不过该方式会修改CRA底层默认逻辑，后续版本升级容易出现兼容问题，不建议使用。