Angular 5项目部署GitHub后添加路由无法显示首页求助

嘿，这个问题我之前帮人排查过好多次啦——GitHub Pages完全支持多个网站，你的问题根本不是这个原因！核心问题出在Angular的客户端路由和GitHub Pages静态托管的特性不兼容上，具体来说：

当你第一次部署没有路由的项目时，所有访问都会指向index.html，所以正常显示；但添加路由后，直接访问路由路径（比如your-username.github.io/your-project/about）或者刷新页面时，GitHub Pages会尝试在服务器上找对应的物理文件，而Angular的路由是客户端层面的，服务器上根本没有这个文件，所以就会返回404，导致页面无法显示。

下面给你几个靠谱的解决办法，按优先级来：

方法1：使用HashLocationStrategy（最简单） #

Angular默认用的是PathLocationStrategy，也就是不带#的干净路由，但这种方式需要服务器支持重写规则，GitHub Pages做不到。换成Hash模式就可以绕过这个问题：

在你的app.module.ts里修改路由配置：

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

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }] // 新增这行配置
})
export class AppRoutingModule { }

然后重新构建部署，这样路由会变成your-username.github.io/your-project/#/about的形式，GitHub Pages能正确识别并指向index.html。

方法2：配置404.html和base href（保持干净路由） #

如果你不想用Hash模式，可以用这个方案：

1. 设置正确的base href：构建项目时必须指定base href为你的GitHub仓库名称，比如你的仓库叫blac...，就执行：

ng build --prod --base-href="/blac.../"

2. 添加404.html文件：把构建后dist文件夹里的index.html复制一份，重命名为404.html，然后和其他文件一起上传到GitHub Pages。这样当GitHub Pages找不到对应文件时，会返回404.html，而这个文件和index.html内容一样，Angular就能接管路由了。

方法3：检查部署流程 #

最后确认下第二次部署的步骤有没有问题：

• 确保你上传的是ng build --prod生成的dist文件夹里的所有内容，而不是项目根目录的文件
• 检查GitHub Pages的设置，确认部署的分支和目录（比如gh-pages分支的/目录）是正确的

内容的提问来源于stack exchange，提问作者tomcat-dev