如何打包Angular应用，实现一次构建即可部署至任意位置？

方法一：使用相对路径作为base href #

直接在index.html里将<base href="/">修改为<base href="./">，Angular会以当前部署目录为基准加载资源，不管部署在根路径还是子路径都能正常工作，无需重新构建。

方法二：动态设置base href #

如果需要更灵活的适配，可以在index.html的<head>中添加一段脚本，动态获取当前页面路径并设置base href：

<head>
  <!-- 移除原来的静态base标签 -->
  <script>
    const baseElement = document.createElement('base');
    baseElement.href = window.location.pathname;
    document.head.appendChild(baseElement);
  </script>
  <!-- 其他head内容 -->
</head>

这种方式会自动识别当前部署的路径（比如/或/my-app/），确保资源加载路径正确。

方法三：通过APP_BASE_HREF注入动态适配 #

在Angular根模块中，利用APP_BASE_HREF令牌注入动态获取的路径值，让框架内部路由和资源加载都适配当前部署位置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    { 
      provide: APP_BASE_HREF, 
      useValue: window.location.pathname || '/' 
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

同时确保index.html中不再设置静态的<base>标签，由框架自动处理路径基准。

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