Angular 14中如何在ng serve模式下覆盖baseHref为'/'

• 为匹配静态资源部署路径，在angular.json中全局配置baseHref为'/bui'：生产环境实际base路径为/something-extra/bui/，对接ASP.NET Core wwwroot静态文件的测试场景也需要使用/bui/作为base路径。
• Angular 14版本已废弃deployUrl配置，要求统一通过baseHref处理所有资源基础路径逻辑。
• 本地执行ng serve以4200端口启动服务、访问https://localhost:4200时，页面抛出Cannot GET /错误：原因是配置baseHref: '/bui'后，ng serve仅会响应/bui路径下的请求，直接访问根路径无匹配资源。
• 直接在angular.json的ng-serve配置段添加baseHref字段无法生效，因为serve配置本身不直接读取该字段，所有构建相关参数均继承自关联的build目标配置。

方案1：启动命令传参（适合临时调试） #

启动本地服务时追加--base-href参数，命令行参数优先级高于配置文件的全局设置，会直接将开发模式下的baseHref覆盖为/：

ng serve --base-href /

执行后访问https://localhost:4200即可正常加载页面，不需要修改任何现有配置。

方案2：拆分多环境构建配置（一劳永逸，适合长期维护的项目） #

不要把baseHref放在build的全局options配置段，而是拆分到不同场景的构建配置中，让serve默认关联开发场景的配置：

1. 打开angular.json，找到对应项目的architect.build.configurations节点
2. 分别为不同使用场景配置对应的baseHref：
   • production配置段保留生产环境路径/something-extra/bui/
   • 新增/调整aspnet-test配置段，设置baseHref: '/bui/'用于ASP.NET Core静态文件测试
   • 新增/调整development配置段，设置baseHref: '/'用于本地ng serve调试
3. 调整architect.serve节点的默认配置，让其默认关联development构建目标，启动时自动使用/作为base路径

核心配置片段参考：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          // 注意：不要在全局options里配置baseHref
          "options": {
            // 其余全局通用构建配置
          },
          "configurations": {
            "production": {
              "baseHref": "/something-extra/bui/",
              // 其余生产环境构建配置：optimization、outputHashing等
            },
            "aspnet-test": {
              "baseHref": "/bui/",
              // 其余测试场景配置
            },
            "development": {
              "baseHref": "/",
              // 其余开发环境配置：sourceMap、optimization: false等
            }
          }
        },
        "serve": {
          "options": {
            "port": 4200
            // 其余serve通用配置
          },
          "configurations": {
            "development": {
              "browserTarget": "your-project-name:build:development"
            }
          },
          "defaultConfiguration": "development"
        }
      }
    }
  }
}

配置完成后：

• 本地直接执行ng serve会默认使用development配置，baseHref自动为/，根路径访问正常
• 打包生产环境执行ng build --configuration=production即可自动使用生产路径
• 对接ASP.NET Core测试场景执行ng build --configuration=aspnet-test即可匹配对应路径，不需要反复修改全局配置。

内容的提问来源于stack exchange，提问作者stephan.peters