React应用部署至gh-pages后仅显示README，未加载index.js求助

我来帮你排查这个问题！当React部署到gh-pages只显示README而不加载应用时，通常是几个关键配置没做好，结合你的仓库情况，咱们一步步解决：

1. 检查并配置package.json的核心字段 #

首先打开你的package.json，这是解决问题的关键入口：

• 添加homepage字段：这个字段会告诉React构建时生成正确的资源路径，必须匹配你的gh-pages访问地址。在package.json中加入：

  "homepage": "https://vitorrrocha.github.io/Star-Wars-info/"
  

• 新增部署脚本：在scripts部分添加两个命令，实现自动构建并推送部署包到gh-pages分支：

  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
  

2. 安装gh-pages依赖 #

如果还没安装这个部署工具，打开终端运行：

npm install gh-pages --save-dev

3. 重新执行部署 #

在终端运行部署命令，它会自动构建你的React应用，并把build文件夹的内容推送到仓库的gh-pages分支：

npm run deploy

4. 验证GitHub Pages设置 #

登录你的GitHub仓库，进入Settings > Pages页面：

• 确认Source选项选择的是gh-pages分支，且目录设置为/root（根目录）
• 保存设置后，等待2-3分钟让GitHub Pages生效（首次部署可能需要更长时间）

5. 清理缓存（可选） #

如果部署后还是显示README，尝试清除浏览器缓存，或者用无痕模式访问你的gh-pages地址。另外，如果仓库根目录有CNAME文件，确认它和你的访问地址一致，不需要的话可以直接删除。

按照这些步骤操作后，你的React应用应该就能正常加载了！

内容的提问来源于stack exchange，提问作者Vitor Augusto Batista Rocha