React构建后如何修改process.env.API_BASE_URL环境变量

我有一个React应用，通过process.env.API_BASE_URL连接后端API。目前用本地和生产两套Webpack配置分别设置开发/生产环境的API地址，但现在需要构建完成后修改API_BASE_URL——因为构建时变量已被嵌入为静态值，且这个构建包要分发给不同客户端使用各自的后端地址，同时Webpack配置已经很复杂，没法再调整。

当前Webpack配置片段 #

const GLOBALS = {
  'process.env': {
    NODE_ENV: JSON.stringify('production'),
    API_BASE_URL: JSON.stringify(
      config.API_BASE_URL || 'http://127.0.0.1'
    ),
    __BUILDVERSION__: JSON.stringify(commitHash),
    __BUILDTIME__: new Date().getTime(),
    __PRODUCTVERSION__: JSON.stringify(productVersion),
  },
};

main.js中的测试代码 #

console.log(
  process.env.REACT_APP_API_BASE_URL,
  process.env.API_BASE_URL,
  process.env
);

控制台输出结果 #

undefined
 http://127.0.0.1
 { API_BASE_URL: "http://127.0.0.1", WS_BASE_URL: undefined, __BUILDVERSION__: commit, __PRODUCTVERSION__: "latest" }

根目录.env文件 #

REACT_APP_API_BASE_URL="http://testurl"

我尝试过动态修改环境变量的方案，但未生效。

因为Webpack已经把process.env.API_BASE_URL静态编译进了代码，要实现构建后修改，得把配置从编译时变量改成运行时读取：

• 在public目录下新增config.js文件

window.APP_CONFIG = {
  API_BASE_URL: "http://127.0.0.1" // 默认后端地址
};

• 修改index.html，在React脚本前引入config.js

<script src="%PUBLIC_URL%/config.js"></script>

• 替换项目中所有process.env.API_BASE_URL的引用
  把代码里的编译时变量替换成运行时读取的全局配置，比如API请求工具：

// 原代码
axios.defaults.baseURL = process.env.API_BASE_URL;

// 修改后
axios.defaults.baseURL = window.APP_CONFIG.API_BASE_URL;

• 构建后修改API地址
  构建完成后，直接修改build/config.js里的API_BASE_URL值即可，无需重新构建。分发给不同客户端时，只需要给对应客户端修改这个文件的地址就行。

为什么之前的方案没生效？ #

之前的方案可能依赖Create React App的内置变量注入机制，但你的项目是自定义Webpack配置，REACT_APP_前缀的变量不会被自动处理——而你又不想调整已有的复杂Webpack配置，所以用运行时读取外部配置的方式最直接。

内容的提问来源于stack exchange，提问作者4rr0w