Angular路由部署GitHub Pages遇404错误问题咨询

问题原因 #

GitHub Pages是静态文件托管服务，它的核心逻辑是：收到URL请求时，会在托管的文件目录中查找对应路径的实际文件或文件夹。而你的Angular应用使用的是HTML5模式的客户端路由，所有路由逻辑都在浏览器端完成，服务器上并没有/research、/publications这类路径对应的真实文件或目录。

这就导致了两种不同的表现：

• 从主页点击菜单链接：属于浏览器内部的客户端跳转，Angular直接处理路由，无需向GitHub Pages服务器发送新请求，因此正常工作。
• 直接访问/刷新非主页URL：请求会发送到GitHub Pages服务器，服务器找不到对应路径的静态资源，就会返回404错误。

无哈希路由的解决办法 #

因为你需要简洁易记的URL，可通过以下步骤解决：

1. 在项目根目录复制index.html文件，并重命名为404.html。这样当服务器返回404时，会加载这个文件，Angular就能接管路由逻辑。
2. 构建Angular项目时，指定正确的base-href：

   # 如果是普通仓库，比如username/repo-name
   ng build --base-href="/repo-name/"
   # 如果是个人主页仓库（username.github.io），base-href设为"/"
   ng build --base-href="/"
   

3. 将构建后的dist目录内容部署到GitHub Pages即可。

内容的提问来源于stack exchange，提问作者Michael Kintscher they-them