Angular构建后URL出现重复目录且刷新报404错误的解决方法

API 探路者

2026-5-25

解决Angular部署的Base-Href重复与刷新404问题

我来帮你搞定这两个Angular部署中常见的坑，咱们逐个解决：

一、URL中Base-Href出现两次的问题

这个问题通常是build配置和服务器部署路径重复叠加导致的——比如你在build时指定了--base-href=/XXXX/，但服务器又把应用部署到了/XXXX/子目录下，就会出现abc.com/XXXX/XXXX的叠加情况。

解决步骤：

确认服务器部署路径：先搞清楚你的应用在服务器上的实际部署位置。如果服务器已经将应用映射到/XXXX/路径（比如Nginx的location配置指向了这个子目录），那么你有两种选择：
1. 去掉build命令中的--base-href参数，让Angular默认使用服务器的部署路径；
2. 确保--base-href的值和服务器路径完全一致，格式要正确（必须是--base-href="/XXXX/"，前后斜杠都不能少）。
改用angular.json配置（更稳妥）：避免命令行输入错误，直接在项目根目录的angular.json里配置baseHref：
找到projects -> 你的应用名 -> architect -> build -> options，添加一行：
```
"baseHref": "/XXXX/"
```
之后直接执行ng build --prod即可，不用再在命令行加base-href参数。
清理缓存：部署后记得清掉浏览器缓存，有时候旧的base-href配置会被缓存，导致问题残留。

二、页面刷新时404的问题

这是SPA（单页应用）的典型问题：Angular的路由是前端路由，刷新页面时浏览器会直接向服务器请求该路径的静态文件，但服务器上根本没有对应文件，所以返回404。解决核心是让服务器把所有非静态文件的请求转发到Angular的index.html，由前端路由处理。

不同服务器的配置方法：

1. Nginx服务器

修改你的Nginx配置文件（通常是/etc/nginx/nginx.conf或站点配置文件），在server块中添加：

location /XXXX/ {
  root /path/to/your/angular/dist; # 指向你的Angular打包后的dist目录
  try_files $uri $uri/ /XXXX/index.html;
}

保存后重启Nginx服务即可。

2. Apache服务器

在服务器上的应用部署目录（即/XXXX/对应的物理目录）下创建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteBase /XXXX/
RewriteRule ^index\.html$ - [L]
# 非文件/非目录的请求都转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /XXXX/index.html [L]

确保Apache已经开启了mod_rewrite模块。

3. IIS服务器

在应用根目录创建web.config文件，添加重写规则：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/XXXX/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

备选方案：使用Hash路由

如果你不想改服务器配置，可以切换Angular的路由模式为HashLocationStrategy，这样URL会带上#（比如abc.com/XXXX/#/your-route），刷新时浏览器不会向服务器请求路径，而是直接由前端路由处理。修改方法：
在app-routing.module.ts中：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, HashLocationStrategy, LocationStrategy } from '@angular/router';

const routes: Routes = [/* 你的路由配置 */];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }] // 添加这一行
})
export class AppRoutingModule { }

不过这种方法会改变URL格式，看你的需求选择。

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