Github Pages部署Angular项目后无法读取assets文件夹下文本文件怎么办？

你对路径问题的判断是合理的，这是Angular项目部署到Github Pages时最常见的报错原因之一。

路径问题的触发逻辑 #

Github Pages默认将项目部署在对应仓库名的子路径下，比如你的仓库名为angular-demo，部署后的服务根路径为https://<你的用户名>.github.io/angular-demo/。你使用的绝对路径fetch('/assets/texts/instrucciones.txt')会直接指向域名根路径下的资源，也就是https://<你的用户名>.github.io/assets/texts/instrucciones.txt，缺少了仓库名的子路径前缀，自然无法命中资源。
本地开发时Angular CLI的开发服务器将项目托管在根路径下，所以绝对路径不会出现报错。

可行的修复方案 #

• 改为相对路径引用：将fetch('/assets/texts/instrucciones.txt')调整为fetch('./assets/texts/instrucciones.txt')，资源路径会自动基于当前页面的路径进行拼接
• 配置统一的资源前缀：在angular.json的build配置项中添加deployUrl参数，取值和你Github Pages的子路径保持一致，比如部署在/angular-demo/下就配置为"deployUrl": "/angular-demo/"，构建时会自动给所有静态资源路径加上对应前缀
• 配置基础路径：通过Angular内置的APP_BASE_HREF令牌设置全局基础路径，统一处理路由和资源请求的前缀规则

其他需要排查的环节 #

• 检查构建生成的dist目录，确认assets/texts/instrucciones.txt文件确实被打包到了产物中，排除构建流程遗漏assets资源的问题
• 查看仓库Pages配置页，确认部署使用的分支和目录和你上传的构建产物路径一致
• 打开浏览器控制台的Network面板，查看实际发起的资源请求路径和404报错信息，可以快速确认是否为路径匹配问题

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