能否构建支持构建后动态填充环境变量的React应用？

完全可以实现，不需要针对staging、prod等不同环境重复构建React产物，也能彻底解决构建产物提交Git导致的分支冲突问题。

这个方案不需要额外引入依赖，完全贴合你当前的技术栈：

• 第一步：调整前端代码的配置读取逻辑
  移除构建时注入API URL的逻辑，所有接口请求的基础地址统一从全局变量读取，比如window.__RUNTIME_CONFIG__.API_BASE_URL。本地开发时可以在public目录的index.html里写死本地开发用的API地址作为默认值，不影响本地调试。
• 第二步：由Django动态注入运行时配置
  不要把React构建生成的index.html作为纯静态文件直接托管，改成由Django路由接管该页面的返回：在Django的分层配置里（本身staging、prod环境就会加载不同的settings配置）读取当前环境对应的API地址，在返回html内容前，把配置注入到页面头部的script标签中，示例注入代码如下：

  <script>
    window.__RUNTIME_CONFIG__ = {
      API_BASE_URL: "{{ 当前环境settings中配置的API地址 }}"
    }
  </script>
  

  同一份React构建产物部署到任意环境时，用户访问页面拿到的是Django注入了对应环境配置的html，React初始化时直接读取全局变量就能拿到正确的API地址，全程不需要重新构建前端代码。

如果不想调整Django的静态文件返回逻辑，可以用独立配置文件的方案实现：

• React构建时排除配置文件逻辑，在index.html中通过固定路径引入根目录下的config.js，该文件不参与构建、不提交到Git仓库，加入.gitignore列表。
• config.js内同样挂载全局配置变量：

  // 部署时由部署脚本动态生成，无需提交代码库
  window.__RUNTIME_CONFIG__ = {
    API_BASE_URL: "当前部署环境对应的API地址"
  }
  

• 每次部署到不同环境时，只需要让部署脚本根据当前环境生成对应的config.js放到静态资源根目录即可，React打包生成的js、css等带hash的静态资源全环境通用，不需要替换。

• 真正实现单次构建多环境复用，构建过程不需要传入任何环境相关变量，从根源上避免不同环境构建产物不一致的问题。
• 不需要把React构建产物提交到Git仓库，彻底解决PR合并时构建产物冲突、提交历史杂乱的问题。
• 不需要在前端代码里写域名判断、环境识别的硬编码逻辑，后续新增环境、修改API地址只需要调整服务端/部署脚本配置，不需要重新发布前端代码。

注意：不要在前端代码里通过window.location.host判断当前环境再匹配API地址，这种硬编码逻辑维护成本极高，改域名、新增环境都要修改前端代码重新发布，容易出现匹配错误导致连错环境的故障。

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