无路由React单页应用部署GitHub Pages后页面空白且资源加载404问题求助

兄弟，我一眼就看出你这问题出在哪儿了——从控制台的404错误信息来看，你的资源请求路径完全错了！你看，浏览器在请求https://vicktor61.github.io/VickTor61/indecision-sniffle.git/static/css/...，但你的实际应用地址是https://vicktor61.github.io/indecision-sniffle/，多出来的VickTor61/indecision-sniffle.git就是罪魁祸首，这明显是package.json里的homepage配置写错了导致的。

问题根源分析 #

Create React App会根据package.json里的homepage字段生成打包后资源的基准路径。你现在填的是仓库的Git地址https://github.com/VickTor61/indecision-sniffle.git，这完全不符合要求——GitHub Pages的homepage应该指向你的应用访问地址，而不是仓库的Git链接。这个错误导致打包后的所有资源路径都带上了多余的Git仓库路径，GitHub Pages自然找不到这些文件，页面就空白了。

分步解决方案 #

1. 修正package.json的homepage配置 #

打开你的package.json，把原来的homepage字段改成下面两种正确格式的任意一种：

格式一：完整的应用访问地址

"homepage": "https://vicktor61.github.io/indecision-sniffle/"

格式二：相对路径（更通用，适合后续修改仓库名或用户名）

"homepage": "/indecision-sniffle/"

2. 重新打包并部署 #

先清理旧的打包文件，然后重新执行部署流程：

# 删除旧的build文件夹（可选，但能避免缓存问题）
rm -rf build
# 执行预部署脚本（自动打包）
yarn predeploy
# 部署到GitHub Pages
yarn deploy

或者直接一步到位：

yarn predeploy && yarn deploy

3. 验证部署结果 #

部署完成后，别着急刷新，给GitHub Pages1-2分钟的同步时间，然后访问你的应用链接。打开浏览器控制台，如果没有再出现404错误，页面应该就能正常显示了。

额外注意事项 #

• 确保你的GitHub仓库是公开仓库，私有仓库需要开通GitHub Pages付费服务才能正常访问
• 检查仓库的gh-pages分支是否正确生成，里面应该包含你build文件夹里的所有文件
• 如果后续修改了仓库名或用户名，记得同步更新homepage字段

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