HTML base href与Angular APP_BASE_HREF的区别及关联是什么

核心区别 #

• <base href> 是HTML原生标准标签
  定义在 index.html 的 <head> 节点内，是浏览器原生识别的配置，作用范围覆盖当前页面所有相对路径资源的解析：包括静态资源（图片、CSS、非Angular引入的JS文件）、普通锚点跳转、表单提交路径等，和Angular框架无关，纯静态HTML项目也可使用。
  示例配置：

  <head>
    <base href="/my-app/">
  </head>
  

  上述配置后，页面内相对路径 assets/logo.png 会被浏览器自动解析为 /my-app/assets/logo.png。

• APP_BASE_HREF 是Angular专属的DI令牌
  属于Angular路由体系的配置项，仅作用于Angular内部的路由逻辑：包括路由路径匹配、routerLink 生成跳转路径、路由懒加载模块的路径解析等，不会影响浏览器对静态资源的路径解析。
  示例配置：

  import { APP_BASE_HREF } from '@angular/common';
  import { NgModule } from '@angular/core';
  
  @NgModule({
    providers: [
      { provide: APP_BASE_HREF, useValue: '/my-app/' }
    ]
  })
  export class AppModule { }
  

关联规则 #

• 默认情况下Angular会自动读取 index.html 中 <base href> 的值作为 APP_BASE_HREF 的默认值，常规单页应用场景下仅需配置 <base href> 即可同时满足静态资源解析和Angular路由的需求，无需额外配置 APP_BASE_HREF。
• Angular CLI 打包时的 --base-href 参数会同时修改 index.html 中的 <base href> 取值和Angular默认的 APP_BASE_HREF 取值，无需手动修改代码。
• 特殊场景可单独配置 APP_BASE_HREF 覆盖默认值：比如应用的静态资源和路由需要使用不同的基础路径、使用Hash路由模式无需配置 <base href> 时，可单独配置 APP_BASE_HREF 满足路由需求，不会影响浏览器对静态资源的路径解析。

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