Azure静态Web应用未使用environment.prod.ts的baseUrl值问题

核心原因 #

Angular的环境文件切换完全依赖构建阶段的配置指定：

• 执行ng build（不带参数）会默认使用development配置，加载environment.ts
• 执行ng build --configuration production（Angular 12+）或ng build --prod（旧版本）才会触发production配置，通过fileReplacements规则将environment.ts替换为environment.prod.ts

你的问题本质是Azure静态Web Apps的构建流程没有触发Angular的生产环境构建逻辑，导致最终部署的是基于environment.ts构建的产物。

排查与解决步骤 #

1. 确认angular.json的production配置正确性 #

打开项目根目录的angular.json，检查projects -> [你的项目名] -> architect -> build -> configurations -> production节点，确保fileReplacements配置正确指向environment.prod.ts：

"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "aot": true,
  "buildOptimizer": true
}

2. 修改Azure静态Web Apps的构建命令 #

方式1：Azure门户配置

1. 登录Azure门户，进入你的静态Web Apps资源
2. 左侧菜单选择构建配置
3. 在应用构建命令中输入ng build --configuration production（Angular 12+）或ng build --prod（旧版本）
4. 确认输出位置为Angular构建后的产物目录（通常是dist/[你的项目名]）
5. 保存配置后重新触发部署

方式2：GitHub Actions工作流修改

如果使用GitHub Actions部署，打开仓库的.github/workflows/azure-static-web-apps-*.yml文件，修改app_build_command字段：

app_build_command: "ng build --configuration production"

提交修改后，GitHub Actions会自动重新构建并部署。

3. 关于Azure应用设置不生效的说明 #

Azure静态Web Apps的应用设置属于运行时环境变量，但Angular的environment.ts/environment.prod.ts是构建时注入的静态值，构建完成后这些值就固化在静态文件中。因此，后续修改应用设置无法改变已构建产物中的baseUrl。如果需要运行时动态配置，可通过APP_INITIALIZER加载外部配置文件实现，但对于环境区分场景，正确使用生产构建命令即可解决问题。

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