在Angular中，BASE_HREF是用来定义应用所在URL的基准路径的，通常情况下，它是静态的。但是有些场景下，我们需要动态设置BASE_HREF，比如在打包应用的时候根据环境变量来动态设置，这时候我们可以通过修改index.html文件来实现。

具体步骤如下：

1. 在index.html中使用script标签定义一个全局变量，比如设置为window.BASE_HREF，并且设置初始值为"/"。

2. 在Angular应用的根模块中定义一个函数，用来获取并动态设置window.__BASE_HREF__的值。

export function getBaseHref(): string { const baseHref = document.querySelector("base").getAttribute("href"); return baseHref.replace(//$/, ""); }

const providers = [{ provide: APP_BASE_HREF, useFactory: getBaseHref }];

@NgModule({ providers: providers })

3. 然后在Angular应用的根组件中获取并设置window.__BASE_HREF__的值。

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-root", template: "" }) export class AppComponent implements OnInit { ngOnInit() { const baseHref = document .querySelector("base") .getAttribute("href") .replace(//$/, ""); (window).BASE_HREF = baseHref; } }

4. 最后，在需要使用到动态设置的BASE_HREF的地方，我们可以直接使用window.__BASE_HREF__变量。

例如，我们可以在AppRoutingModule中这样使用：

import { NgModule } from "@angular/core"; import { Routes, RouterModule } from "@angular/router"; import { HomeComponent } from "./home/home.component"; import { AboutComponent } from "./about/about.component";

const routes: Routes = [ { path: