react 项目部署到 github pages 后出现白屏，通常是因为 `homepage` 字段配置错误或缺失，导致静态资源路径解析失败，引发 404 错误。正确设置 `homepage` 并配合构建配置即可修复。
当使用 create-react-app 构建并部署 React 应用至 GitHub Pages（如 https://username.github.io/repo-name）时，必须在 package.json 中显式声明 homepage 字段，且该字段仅允许出现在 package.json 中，绝不可写入 package-lock.json —— 后者是自动生成的依赖锁定文件，手动修改会被覆盖，且无效。
✅ 正确做法如下：
-
在 package.json 中设置 homepage（注意：不是 package-lock.json）：
{ "name": "tic_tac_toe", "version": "0.1.0", "homepage": "https://richardshaju.github.io/tictactoe", // 其他字段... }⚠️ 注意事项：
- URL 必须与 GitHub Pages 实际访问地址完全一致（区分大小写、末尾斜杠）；
- 若仓库名为 tictactoe（非 tic-tac-toe），则路径应为 /tictactoe，而非 /tic-tac-toe；
- 若为用户主页（即 username.github.io 根域名），homepage 应设为 "https://username.github.io"；若为项目页（子路径），则必须带子路径，如 "/tictactoe"（相对路径）或 "https://username.github.io/tictactoe"（绝对路径）——推荐使用绝对 URL，避免本地开发与部署环境不一致。
-
确保已安装并配置 gh-pages：
npm install --save-dev gh-pages
-
在 package.json 中添加部署脚本：
"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } -
执行部署：
npm run deploy
验证关键点：
- 构建后，检查 build/index.html 中
- 在 GitHub Pages 设置中（Settings → Pages），确认源已设为 gh-pages 分支的 / (root) 或 /docs 文件夹（取决于部署方式）；
- 浏览器控制台若仍报 404，请右键「查看页面源代码」，检查资源路径是否为 https://richardshaju.github.io/static/js/main.xxxx.js（错误：缺少子路径）→ 应为 https://richardshaju.github.io/tictactoe/static/js/main.xxxx.js。
? 补充提示：
- package-lock.json 是 npm 自动生成的文件，永远不要手动编辑它。所有配置变更均应在 package.json 中完成；
- 部署后首次访问若仍白屏，尝试强制刷新（Ctrl+F5）或清空浏览器缓存，因旧版 index.html 可能被缓存；
- 开发时可运行 npm start 验证本地路径无误，再执行构建部署。
遵循以上步骤，即可彻底解决 GitHub Pages 上 React 应用白屏及资源 404 问题。
