如何基于Nx目标配置实现.env文件的环境替换？

我的Nx工作区包含三个项目：两个React应用（二者共享部分逻辑，但分别面向Web和Microsoft Teams平台，必须独立），以及一个供这两个应用使用的API客户端库。
API客户端项目需要环境特定的Base URL变量。
我可以为.ts文件在构建过程中定义环境变量并启用文件替换（例如生产配置下将environment.ts替换为environment.production.ts），但为避免双向依赖，我不想在API客户端项目中引用environment.ts文件。

由于依赖于可变的代码生成逻辑，我无法从API项目中抽离依赖该URL变量的代码。
我曾通过在应用项目根目录使用.env文件（变量格式为NX_MY_URL，可通过process.env.NX_MY_URL访问）成功提供该变量。
但切换构建配置（如开发、测试、生产）时无法修改该变量。我尝试添加如下文件替换任务：

"configurations": {
        "development": {
          "fileReplacements": [
            {
              "replace": "apps/ra-web/src/environments/environment.ts",
              "with": "apps/ra-web/src/environments/environment.development.ts" //<----- 此配置正常工作
            },
            {
              "replace": "apps/ra-web/.env",
              "with": "apps/ra-web/.development.env" //<----- 此配置无效，.env值保持不变
            }
          ],

如何基于Nx目标配置实现.env文件的替换？

核心原因 #

Nx读取.env文件的时机远早于fileReplacements执行的编译阶段，所以通过fileReplacements替换.env文件的操作不会生效，必须利用Nx原生的环境变量加载机制。

具体实现步骤 #

1. 按环境命名.env文件
   在应用根目录（如apps/ra-web）创建对应环境的.env文件：

   • .env.development：开发环境变量，内容示例：NX_MY_URL=http://dev-api.example.com
   • .env.production：生产环境变量，内容示例：NX_MY_URL=https://prod-api.example.com
   • 可保留根目录的.env作为默认 fallback（可选）。

2. 配置Nx目标的环境关联
   在workspace.json或angular.json的应用build目标配置中，为每个configuration添加environment字段，明确关联环境：

   "configurations": {
     "development": {
       "fileReplacements": [
         {
           "replace": "apps/ra-web/src/environments/environment.ts",
           "with": "apps/ra-web/src/environments/environment.development.ts"
         }
       ],
       "optimization": false,
       "sourceMap": true,
       "environment": "development"
     },
     "production": {
       "fileReplacements": [
         {
           "replace": "apps/ra-web/src/environments/environment.ts",
           "with": "apps/ra-web/src/environments/environment.production.ts"
         }
       ],
       "optimization": true,
       "sourceMap": false,
       "environment": "production"
     }
   }
   

3. 运行命令时指定配置
   执行构建或启动命令时通过--configuration参数指定环境，Nx会自动加载对应环境的.env文件：

   • 开发环境构建：nx build ra-web --configuration=development
   • 生产环境构建：nx build ra-web --configuration=production

额外说明 #

• 所有需要注入的环境变量必须以NX_为前缀，Nx才会将其注入到应用和库的process.env中，确保API客户端库能正常访问。
• 如果需要本地覆盖环境变量，可以创建.env.local文件，其优先级高于所有环境特定的.env文件，适合本地调试使用。

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