Angular 5部署后assets文件夹路径指向错误问题求助

这个问题我之前帮朋友排查过类似的，Angular 5里的base-href和deploy-url确实容易搞混，我来给你捋清楚问题根源并一步步解决：

问题核心原因 #

首先得明确这两个参数在Angular 5里的分工：

• --base-href（简称--bh）：作用是设置index.html里的<base>标签，页面中所有相对路径的资源引用都会基于这个路径解析，同时也会影响路由的基准路径。
• --deploy-url：这个参数只负责指定打包后生成的js、css、vendor等编译产物的加载路径，不会自动修改你代码中硬编码的assets资源路径。

你遇到的问题，大概率是下面两种情况之一：

1. 代码中引用assets时用了绝对路径（比如/assets/logo.png），这种写法会直接忽略<base>标签，强制请求根目录下的assets资源；
2. 同时使用--deploy-url和--base-href产生了冲突，干扰了资源路径的正常解析。

具体解决步骤 #

1. 修改代码中的Assets引用方式 #

先检查你项目中所有引用assets的地方，把绝对路径改成相对路径：

• 错误写法：<img src="/assets/logo.png"> 或 this.imageUrl = '/assets/bg.jpg'
• 正确写法：<img src="assets/logo.png"> 或 this.imageUrl = 'assets/bg.jpg'（去掉开头的斜杠）

这样修改后，资源引用会基于<base>标签的路径（也就是你设置的/myproject/）自动解析为192.168.1.1/myproject/assets/xxx。

2. 简化Build命令，去掉多余的--deploy-url #

在Angular 5中，如果你没有把编译产物（js/css）部署到和页面不同的路径，根本不需要--deploy-url参数，保留--base-href就足够了。修改后的build命令：

ng build --prod --base-href /myproject/ --sourcemap

执行完打包后，检查生成的dist/index.html，确认<base>标签是否正确设置为：

<base href="/myproject/">

3. 确认.angular-cli.json的Assets配置正确 #

打开项目根目录下的.angular-cli.json（Angular 5用的是这个配置文件，不是后来的angular.json），找到assets数组，确保它包含你的assets文件夹：

"apps": [
  {
    // ...其他配置
    "assets": [
      "assets",
      "favicon.ico"
    ],
    // ...其他配置
  }
]

这个配置会告诉Angular打包时把assets文件夹完整复制到dist目录下，部署到服务器后就会出现在/var/www/html/myproject/assets路径下。

4. 全局配置基准路径（可选） #

如果上面的步骤还没解决问题，可以在AppModule中手动注入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({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/myproject/' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后验证 #

打包完成后，把dist目录下的所有文件复制到服务器的/var/www/html/myproject目录，访问192.168.1.1/myproject，打开浏览器开发者工具（F12）的Network面板，确认assets资源的请求路径是否为192.168.1.1/myproject/assets/xxx。

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