React项目部署至GitHub后显示空白页面且出现404资源加载错误

• 优先检查package.json的配置

  你提供的是package-lock.json里的homepage配置，但实际生效的是**package.json**中的设置。确认package.json内已正确添加：

  "homepage": "https://richardshaju.github.io/tictactoe"
  

  package-lock.json是依赖锁文件，手动修改不生效，无需改动它。

• 配置正确的部署脚本
  在package.json的scripts字段中添加部署相关命令：

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

  先安装gh-pages依赖：

  npm install gh-pages --save-dev
  

  执行npm run deploy完成部署。

• 确认GitHub仓库Pages设置
  进入你的tictactoe仓库，依次打开Settings > Pages，检查Source选项是否选择了gh-pages分支，目录设置为/root，保存后等待1-2分钟再刷新页面。

• 处理路由与静态资源路径问题
  如果使用了React Router：

  • 替换BrowserRouter为HashRouter，因为GitHub Pages不支持单页应用的BrowserRouter路由规则，会导致子路由或刷新页面时404。
  • 所有静态资源（图片、字体等）的引用需使用相对路径，或通过process.env.PUBLIC_URL前缀拼接，示例：

    <img src={`${process.env.PUBLIC_URL}/assets/logo.png`} alt="logo" />
    

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