如何为Angular5项目配置多生产环境的REST API切换构建

针对你需要适配Prod1和Prod2两个生产环境的需求，结合当前手动部署的场景，这里有几个简单可靠的方案，都是基于Angular CLI原生能力实现，不需要额外复杂工具：

方案一：多环境配置文件 + 构建参数（最推荐） #

Angular 5本身支持通过环境配置文件和构建参数切换环境，步骤清晰易维护：

1. 创建第二个生产环境配置文件
   在项目的src/environments目录下，复制现有的environment.prod.ts并命名为environment.prod2.ts，修改其中的API地址为Prod2的地址：

   export const environment = {
     production: true,
     apiUrl: 'https://prod2-your-api-domain.com' // 替换为Prod2的REST API地址
   };
   

   原有的environment.prod.ts保持指向Prod1的API地址不变。

2. 修改Angular CLI配置文件
   打开项目根目录下的.angular-cli.json（Angular 5使用该配置文件，Angular 6+为angular.json），找到apps数组里的环境配置部分，在environments对象中添加prod2的映射：

   "apps": [
     {
       // 其他配置项...
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts",
         "prod2": "environments/environment.prod2.ts" // 添加这一行
       }
     }
   ]
   

3. 分环境构建
   现在可以通过不同命令构建对应环境的包：

   • 构建Prod1环境的包：ng build --prod（默认使用prod环境配置）
   • 构建Prod2环境的包：ng build --env=prod2 --prod（--env指定使用prod2配置，--prod开启生产模式优化）

   为方便部署团队区分，建议用--output-path参数直接指定命名目录，比如：ng build --env=prod2 --prod --output-path=dist-prod2，避免手动重命名。

4. 调整部署流程
   生产部署团队只需：

   • 按原步骤部署SpringBoot的WAR包到Prod1和Prod2服务器
   • 将对应环境的Angular构建包（dist-prod1或dist-prod2）部署到各自前端服务器

方案二：部署时替换环境变量（备选） #

如果不想维护多个配置文件，可构建通用生产包后在部署阶段替换API地址：

1. 构建通用生产包
   用默认prod配置构建：ng build --prod，此时包内API地址为Prod1的。

2. 替换环境变量
   部署到Prod2时，找到dist目录下的main.[hash].js（Angular 5可能是inline.bundle.js），将其中的Prod1 API地址替换为Prod2的地址。

   注意：这种方式容易因文件名hash变化、替换误操作出错，仅作为备选方案。

关键注意事项 #

• 所有生产环境配置文件的production属性必须设为true，确保构建时启用压缩、混淆等生产优化。
• 手动部署时务必做好包与环境的对应标记，避免部署错误。

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