AngularJS项目部署GitHub Pages出现net::ERR_ABORTED 404错误如何解决

问题原因 #

你遇到的JS文件404报错核心是资源引用路径和GitHub Pages的部署规则不匹配：

1. GitHub Pages部署项目的根路径为仓库名，你当前用的无前缀相对路径会直接请求站点根域名下的资源，而非仓库目录下的资源，导致地址不匹配。
2. GitHub Pages文件系统大小写敏感，若本地文件/文件夹名大小写和仓库中不一致，也会触发404。

修复方案 #

• 修正JS引用路径，将原来的引用代码：

<script src="src/menuList/CategoriesController.js"></script>

修改为相对当前html文件的路径格式：

<script src="./src/menuList/CategoriesController.js"></script>

• 也可直接补全仓库前缀：

<script src="/Module_4_solution/src/menuList/CategoriesController.js"></script>

• 若使用了webpack、vite等打包工具，可直接在打包配置中设置base路径为/Module_4_solution/，所有资源引用会自动补全正确前缀。
• 修改完成后推送代码到仓库，等待1-2分钟GitHub Pages构建完成，清除浏览器缓存后刷新页面即可验证修复效果。

内容的提问来源于stack exchange，提问作者Rashad-Harun