GitHub Pages部署后JS fetch拉取仓库JSON文件失败如何解决

你遇到的资源加载失败问题和GitHub Pages的资源预加载能力无关，GitHub Pages本身是纯静态文件托管服务，不存在「异步调用才加载的资源不会被识别托管」的限制，问题根源是你代码里写的fetch请求路径错误。

你当前代码里的请求地址 https://GITUSER.github.io/GITREPO/tree/gh-pages/data/file.json 是GitHub仓库Web端的代码浏览路径，不是GitHub Pages服务对外暴露的静态资源路径。
GitHub Pages部署完成后，会直接将你指定部署分支（你用的是gh-pages分支）对应目录下的所有文件，映射到站点路径下，根本不存在/tree/gh-pages/这层路由。

直接修改fetch请求的路径即可，优先用相对路径避免硬编码域名、仓库名带来的后续维护问题，修改后的完整代码如下：

(async function(){
  // 路径对应gh-pages分支部署目录下的 data/file.json 文件
  // 如果是用<USERNAME>.github.io根仓库、或者自定义域名部署，直接写 '/data/file.json' 即可
  const response = await fetch(`/GITREPO/data/file.json`);
  // 增加请求状态校验，方便后续排查问题
  if (!response.ok) {
    throw new Error(`JSON资源加载失败，HTTP状态码：${response.status}`);
  }
  const docData = await response.json();
  const contentTarget = document.getElementById('doc-target');
  const tocTarget = document.getElementById('toc-target')
  createContent(tocTarget,contentTarget,docData);
})();

如果修改路径后依然无法正常加载，逐一核对以下配置：

• 确认gh-pages分支的部署对应目录下，确实存在data/file.json文件，没有被.gitignore规则忽略、没有在构建部署流程中被过滤
• 确认路径和文件名的大小写完全匹配，GitHub Pages服务的路径是大小写敏感的，File.json和file.json会被识别为两个不同资源
• 确认仓库Pages设置中，部署源选择的目录和你存放JSON文件的目录一致，不要出现文件放在分支根目录，但部署源选了/docs目录的情况
• 可以直接在浏览器地址栏输入修改后的JSON资源地址，能正常返回JSON文本内容就说明资源路径配置正确

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