gh-pages部署站点空白报404错误：找不到根目录下index.js如何解决？

问题根因 #

资源请求返回404是因为打包后的HTML中引用的JS/CSS资源使用了站点根目录绝对路径，GitHub Pages子站点的资源实际存放在对应项目子路径下，所以无法加载。

排查修复步骤 #

1. 适配打包工具的公共路径配置 #

• 未eject的Create React App项目：确认package.json中的homepage字段配置正确，且你部署的是npm run build生成的build文件夹内的产物，homepage仅对生产打包生效，本地开发环境不生效。
• 已eject的CRA/Webpack自建项目：在webpack.config.js中修改output配置：

module.exports = {
  output: {
    publicPath: "./", // 或者写死对应子路径 '/curriculum-maker/'
    // 其余配置保持不变
  }
}

• Vite项目：在vite.config.js中添加base配置：

export default {
  base: "./", // 或者写死对应子路径 '/curriculum-maker/'
  // 其余配置保持不变
}

2. 校验打包产物的路径是否正确 #

本地执行生产打包命令后，打开build（或dist）文件夹内的index.html，检查所有JS/CSS资源的引用路径：

• 错误示例：<script src="/index.abc123.js"></script>（根路径绝对路径，子站点无法找到）
• 正确示例：<script src="./index.abc123.js"></script>（相对路径，适配子站点）
  如果路径不符合要求，重新调整打包配置后再次打包。

3. 校验gh-pages部署流程 #

如果使用gh-pagesnpm包自动部署，确认package.json中的脚本配置正确：

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build" // 如果是vite项目，把build改成dist
  }
}

执行npm run deploy完成自动部署，不要手动上传源码或未打包的文件到gh-pages分支。

4. 路由配置说明 #

你之前添加HashRouter未生效是因为资源还未加载成功，和路由配置无关。资源加载问题修复后，HashRouter不需要额外配置basename即可正常适配子站点路径。

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