Angular项目已设baseHref，如何修改assets资源路径？

1. 修正代码中的资源引用方式 #

如果你的HTML模板、CSS/SCSS样式或TypeScript代码里硬编码了绝对路径（比如/assets/fonts/font-file.ttf），Angular不会自动为这类路径添加baseHref前缀。你需要改为相对路径：

• HTML模板中：把 /assets/fonts/xxx 改成 assets/fonts/xxx（去掉开头的斜杠）
• CSS/SCSS中：把 url('/assets/fonts/xxx') 改成 url('assets/fonts/xxx')，或者用Angular支持的~前缀（url('~assets/fonts/xxx')，适配webpack解析逻辑）
• TypeScript代码中：避免直接拼接绝对路径，可注入APP_BASE_HREF动态生成路径，示例：

  import { Component, Inject } from '@angular/core';
  import { APP_BASE_HREF } from '@angular/common';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    constructor(@Inject(APP_BASE_HREF) private baseHref: string) {}
  
    getFontUrl() {
      return `${this.baseHref}assets/fonts/font-file.ttf`;
    }
  }
  

2. 确认angular.json的assets配置 #

确保angular.json里projects/my-project/architect/build/options/assets的配置为正确的相对路径，示例：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

这样配置后，src/assets目录下的所有文件（包括fonts子目录）会完整复制到构建输出目录的assets文件夹中，结合已设置的baseHref，访问路径会自动变为/something/assets/fonts/。

3. 清理缓存后重新构建 #

浏览器缓存或Angular构建缓存可能导致路径未及时更新，执行以下命令清理后重新构建：

# 清理构建缓存
ng cache clean
# 生产环境重新构建
ng build --prod

完成以上步骤后，assets资源的路径会自动带上/something/前缀，变为预期的/something/assets/fonts/。

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