React项目构建后如何不依赖环境变量动态修改API地址

常规的构建时环境变量（比如React默认的REACT_APP_*系列变量）会在打包阶段被直接替换成硬编码字面值打进JS bundle，产物生成后没有修改空间，要实现构建后动态调整API地址，核心是把API地址的配置从构建时提前编译，改成运行时动态加载读取，常用落地方式有两种：

方案1：使用public目录存放独立静态运行时配置 #

public目录下的所有文件，在执行npm run build时会被原封不动拷贝到构建产物的根目录，不会被Webpack编译处理、打进JS bundle，天然适合存独立的运行时配置：

• 在public文件夹下新建app.config.js（相比JSON格式更灵活，加载时可以直接完成全局变量赋值，减少异步等待），内容示例：

  window.__APP_CONFIG__ = {
    API_BASE_URL: "https://your-api-address.com",
    // 其他需要运行时调整的配置项也可以在这里维护
  }
  

• 在项目入口HTML（public/index.html）的<head>标签最顶部，加一行同步引入的脚本，注意一定要在React的bundle脚本之前加载：

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

• 全局封装的请求实例（如Axios实例）统一从window.__APP_CONFIG__.API_BASE_URL读取API地址作为请求的baseURL，不要在代码里硬编码地址、也不要读取构建时的环境变量。

这种方式上线后，只需要修改服务器上构建产物里的app.config.js中的API地址，刷新页面就能生效，完全不需要重新打包前端代码。

方案2：从后端接口拉取应用初始化配置 #

如果需要一套前端包适配多套部署环境，可以把配置读取的逻辑完全交给后端管控：

• 前端在渲染根React组件之前，先请求同源的配置接口（比如/app-config），从接口返回结果中读取API地址、功能开关等运行时配置，把结果挂到全局对象上。
• 等配置加载完成后，再执行ReactDOM挂载逻辑，完成应用渲染。
• 所有请求逻辑同样从全局配置对象中读取API地址，实现配置的动态调整。
  这种方式前端构建产物可以完全通用，不需要针对不同环境修改任何静态文件，所有环境差异由后端接口返回的配置决定。

常见踩坑提醒 #

• 配置的加载逻辑一定要放在React应用挂载之前执行，不要在组件内部的useEffect、组件生命周期中读取配置，否则会出现首屏加载时先发起默认地址的无效请求，甚至触发跨域报错。
• 静态配置文件的引用路径一定要配合项目的部署子路径规则，使用%PUBLIC_URL%前缀引用，避免应用部署在非根路径下时出现配置文件404的问题。
• 全局请求实例要统一封装，不要在各个业务组件中直接发起跨域请求，避免出现硬编码地址漏改的问题。

内容的提问来源于stack exchange，提问作者m.ashrafi