在GitHub部署React应用后页面空白问题求助

以下是针对该情况的排查和解决步骤：

1. 补充部署脚本到package.json #

你的package.json缺少predeploy和deploy脚本，这是gh-pages工具完成部署的必需配置。修改package.json，在dependencies同级添加脚本配置：

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

添加完成后重新执行部署命令：

npm run deploy

2. 检查路由配置（若使用React Router） #

如果你的应用使用了React Router的BrowserRouter，GitHub Pages的静态文件服务特性会导致路由失效，引发页面空白。可二选一解决：

• 替换BrowserRouter为HashRouter
• 给BrowserRouter添加basename属性，值为你的仓库名称：

<BrowserRouter basename="/offline-to-do-app">
  {/* 你的路由内容 */}
</BrowserRouter>

3. 验证构建资源路径 #

执行npm run build后，打开build文件夹中的index.html，检查里面引用的CSS、JS文件路径是否正确（应为类似/offline-to-do-app/static/css/main.xxx.css的格式）。若路径错误，确认homepage配置无误后重新构建部署。

4. 确认GitHub Pages仓库设置 #

进入你的GitHub仓库，依次点击Settings > Pages：

• 确认Source选项选择的是gh-pages分支，根目录（/）
• 部署完成后等待几分钟再刷新页面，GitHub Pages有时存在生效延迟

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