Nx React 运行时注入环境变量实现一次构建多环境部署咨询

你之前使用的public目录下放置env.js、在index.html中引入的方案，在Nx monorepo的React应用中完全可以正常使用，可以实现一次构建、多环境部署的需求，不需要做核心逻辑的修改。

Nx的React构建器默认会将apps/[应用名]/public目录下的所有资源原封不动拷贝到构建产物的根目录，index.html中的静态script引入逻辑不会被构建工具编译修改，和普通非Nx React项目的行为完全一致。

• 在对应React应用的public目录下新增env.js文件，示例内容参考：

// env.js 示例，实际部署时会替换成对应环境的配置
window.APP_ENV = {
  API_BASE_URL: "http://dev-api.example.com",
  APP_VERSION: "1.0.0"
}

• 在应用的index.html的head标签最顶部引入该文件，保证环境变量在其他业务代码执行前加载完成：

<head>
  <script src="/env.js"></script>
  <!-- 其余原有meta、title、样式引入等内容保持不变 -->
</head>

• 业务代码中直接读取window.APP_ENV对象获取环境配置即可，不需要引入任何Nx专属的依赖或配置。

执行nx build [应用名]完成一次构建后，部署到不同环境时，只需要用对应环境的env.js文件覆盖构建产物目录中的同名文件即可，不需要重新执行构建操作。

如果需要统一管理多环境配置，可以自行编写简单的脚本批量生成不同环境的env.js，也可以利用Nx的自定义任务能力实现统一的配置生成逻辑，该优化为可选操作，不影响原有方案的使用。

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