Angular应用部署到虚拟主机后资源无法加载的问题求助

问题根源 #

你当前使用绝对路径（以/开头）引用图片：

<img src="/assets/images/portfolio.png" alt="portfolio">

如果你的Angular应用部署在虚拟主机的子目录下（例如http://your-domain.com/my-app/），浏览器会直接去域名根目录（http://your-domain.com/assets/）寻找资源，而非应用所在的子目录，这就导致了404错误。

可行解决方案 #

方案1：Build时指定Base Href（推荐） #

执行Angular构建命令时，通过--base-href参数指定应用部署的子目录路径，所有资源引用会自动带上这个前缀：

ng build --prod --base-href "/your-subdirectory-name/"

举个例子：如果你的应用部署在http://example.com/portfolio/，就执行：

ng build --prod --base-href "/portfolio/"

构建完成后，所有/assets/开头的路径会自动转为/portfolio/assets/，匹配虚拟主机的实际部署路径。

方案2：改用相对路径引用资源 #

如果组件位于根目录下，将图片路径改为相对路径：

<img src="./assets/images/portfolio.png" alt="portfolio">

若组件在深层目录（比如src/app/components/xxx/），则需要通过../逐层向上导航到assets目录：

<img src="../../assets/images/portfolio.png" alt="portfolio">

⚠️ 注意：这种方式依赖组件的目录结构，若后续组件层级调整，路径需要同步修改，灵活性较差。

方案3：在代码中配置APP_BASE_HREF #

在app.module.ts中导入并配置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';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: APP_BASE_HREF, useValue: '/your-subdirectory-name/' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置完成后再执行构建命令，资源路径会自动适配部署目录。

额外检查项 #

• 确认虚拟主机上已完整上传Angular构建生成的dist文件夹内所有文件，包括assets目录及其内容，没有遗漏或上传路径错误。

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