如何在VSTS发布阶段替换Angular4环境变量？

我之前刚好做过类似的配置迁移，把Angular环境变量的替换从构建阶段挪到VSTS发布阶段，核心是让构建产物变成环境无关的通用包，把变量注入的工作放到发布环节来做，这样一次构建就能适配多环境，下面是具体步骤：

1. 调整Angular项目的环境文件与构建配置 #

• 先改造你的环境文件：把environment.ts/environment.debug.ts/environment.release.ts里的可变配置（比如API地址、功能开关）改成占位符格式，比如原来的apiUrl: 'https://debug.example.com'改成apiUrl: '#{apiUrl}#'（这里用VSTS「Replace tokens」任务的默认标记，你也可以自定义其他格式）
• 修改Webpack或Angular CLI的构建配置：让构建过程只生成一个通用的生产包，不再区分Debug/Release。比如如果用Angular CLI，执行ng build --prod（对应npm run build -- --prod），确保打包后的environment.js里全是占位符，没有硬编码的环境值。

2. 简化VSTS构建管道 #

• 移除构建阶段的「Replace tokens」任务，现在不需要在构建时替换变量了
• 调整构建命令，只执行一次通用构建：比如保留npm install，然后执行npm run build -- --prod生成单一的通用工件，这样构建管道只需要跑一次，就能输出供所有发布环境使用的包。

3. 配置VSTS发布管道的多环境替换 #

• 首先在发布管道中创建对应环境的发布阶段，比如「Debug环境发布」和「Release环境发布」
• 在每个发布阶段中，添加「Replace tokens」任务，放在部署任务（比如部署到IIS/Azure App Service）之前：
  • 目标文件：指定构建产物中环境文件的路径，比如$(System.DefaultWorkingDirectory)/YourBuildArtifact/wwwroot/environments/environment.js（根据你实际的打包输出路径调整）
  • 标记格式：和你环境文件里用的占位符一致，比如默认的#{...}#
• 在每个发布阶段的「变量」面板中，添加对应环境的变量值：比如Debug阶段设置apiUrl=https://debug-api.example.com，Release阶段设置apiUrl=https://prod-api.example.com，其他可变配置同理。

4. 关键注意事项 #

• 如果Webpack打包时会压缩混淆代码，要确保占位符不会被破坏：可以在Webpack配置中对环境文件禁用压缩，或者添加特殊注释（比如/* webpackIgnore: true */）让压缩工具保留占位符
• 测试时先发布到Debug环境，检查部署后的environment.js文件，确认变量已经被正确替换，再验证应用功能是否正常

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