使用Angular/VS Code部署GitHub Pages遇404及展示异常求助

先核对Angular构建配置 #

• 构建时必须指定正确的base href，因为你的仓库名是project，所以构建命令得这么写：
  ng build --prod --base-href "/project/"
  注意base href的值要和仓库名完全匹配，前后的斜杠不能少，不然资源路径会出错。
• 构建完成后，只有dist文件夹里的内容才是需要上传的部署文件，别把整个项目源码直接推到GitHub，没用。

检查GitHub Pages的部署源设置 #

• 进入仓库的Settings页面，找到Pages选项：
  • 方式一：把dist文件夹里的所有文件直接复制到仓库根目录（README可以保留，但得保证index.html在根目录），然后选择main分支的根目录作为部署源；
  • 方式二：用专门的gh-pages分支更省心：先安装gh-pages包，npm install -g gh-pages，然后执行ng build --prod --base-href "/project/"，接着运行gh-pages -d dist/[你的项目名]，这个命令会自动把构建产物推到gh-pages分支，之后在GitHub Pages设置里选择gh-pages分支的根目录即可。

路由问题要注意（如果用了Angular路由） #

• 要是项目用了路由，必须改成HashLocationStrategy，因为GitHub Pages不支持HTML5路由的刷新。在app.module.ts里修改：

  import { HashLocationStrategy, LocationStrategy } from '@angular/common';
  
  @NgModule({
    // ...其他配置项
    providers: [
      { provide: LocationStrategy, useClass: HashLocationStrategy }
    ]
  })
  export class AppModule { }
  

  改完之后路由会变成https://andilekwazimsomi.github.io/project/#/xxx这种带#的形式，刷新就不会出现404了。

确认文件上传到位 #

• 去仓库的代码页面检查，index.html、main.js、styles.css这些构建生成的文件是不是在正确的位置（用gh-pages分支就看该分支根目录，用main分支就看main分支根目录）。要是这些文件没在，说明构建或者上传步骤出错了。

别急，等会儿再试 #

• GitHub Pages部署后有时候需要5-10分钟才会生效，刚上传完就访问大概率会出问题，先等一会儿再刷新试试。

内容的提问来源于stack exchange，提问作者Andile Kwazi T.p