React应用GitHub Pages部署后src目录文件未加载问题求助

以下是按问题出现概率排序的排查修复步骤，逐一核对即可解决绝大多数同类问题：

• 优先核对package.json的homepage字段
  这是该问题最高频诱因。如果你的项目是部署在https://<GitHub用户名>.github.io/<仓库名>/的项目子路径下，必须将homepage字段配置为上述完整访问地址，否则打包后所有静态资源的引用路径会默认指向站点根目录，直接出现资源404，最终只渲染public目录下index.html里预设的背景色，且不会触发业务代码相关的控制台报错。如果是部署在<用户名>.github.io的根主页，将homepage设为"."即可。
  配置示例：

  "homepage": "https://your-github-username.github.io/your-repo-name"
  

• 核对gh-pages分支的打包产物完整性
  执行部署脚本后，进入GitHub仓库的文件列表，切换到gh-pages分支，确认分支根目录存在static资源文件夹、asset-manifest.json、打包后的index.html文件。如果只有public目录下的原始index.html，说明部署脚本没有正确推送打包产物：CRA默认打包输出目录是build，对应正确的脚本配置如下，如果你自定义过打包输出路径，要同步修改-d后面的目录名：

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

• 核对GitHub Pages的部署源配置
  进入仓库Settings的Pages配置页，确认部署源选中的是gh-pages分支的根目录，不要误选存放源码的main/master分支——源码分支里没有打包后的静态资源，直接部署只会加载原始的html文件。
• 路由配置适配
  如果项目使用了react-router，将BrowserRouter替换为HashRouter。GitHub Pages不支持history模式路由的资源回退，该问题一般伴随控制台报错，在你当前无报错的场景下优先级低于前三项。
• 配置修改完成后重新执行npm run deploy，部署完成后等待2-5分钟再访问，GitHub Pages存在节点缓存延迟，刚推送完立即访问大概率还是旧版本资源。

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