Angular 17部署时baseHref与deployUrl配置混淆问题及解决

问题场景 #

使用Docker搭配Nginx部署Angular 17.3.5应用，要求所有路由带上前缀/prefix，最终访问路径格式为https://localhost/prefix/my-routes。

无效尝试 #

1. 仅配置APP_BASE_HREF
   在项目中添加如下配置，告知Angular路由前缀：

{
    provide: APP_BASE_HREF,
    useValue: '/prefix/',
},

但发现angular.json中配置的资源、样式文件访问路径未带上前缀，例如网站图标访问路径仍为https://localhost/favicon.ico，不符合预期。

2. 添加deployUrl配置
   尝试在angular.json中配置deployUrl：

"deployUrl": "/prefix/",

资源和样式的访问路径依旧未自动添加前缀，问题未解决。

最终解决方案 #

未使用deployUrl，通过以下三步解决问题：

1. 保留APP_BASE_HREF配置，确保Angular路由器识别路由前缀/prefix/；
2. 在index.html中添加<base>标签，指定基础路径：

<base href="/prefix/">

3. 替换所有绝对路径的资源引用为相对路径：

• SVG资源引用修改：
  原代码：

  <use [attr.xlink:href]="'/assets/...'"></use>
  

  修改为：

  <use [attr.xlink:href]="'./assets/...'"></use>
  

• SCSS中背景图片路径修改：
  原代码：

  .class {
      background: url('/assets/...');
  }
  

  修改为：

  .class {
      background: url('../../../assets/...');
  }
  

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