GitHub Pages部署React应用时资源请求路径缺失仓库名问题

核心原因 #

React打包时未配置正确的公共路径（publicPath），导致生成的静态资源URL缺少仓库名称前缀。

具体解决步骤 #

• 在项目根目录的package.json中添加homepage字段，值为你的GitHub Pages仓库路径：

  "homepage": "/<你的仓库名>/"
  

  比如仓库名为my-react-demo，就写"homepage": "/my-react-demo/"。这个字段会自动告诉webpack在打包时给所有静态资源URL加上仓库名前缀。

• 重新执行构建命令：

  npm run build
  

  此时查看build文件夹里的index.html，会发现CSS和JS的引用路径已变成/your-repo-name/assets/xxx.css，部署到GitHub Pages后就能正确加载。

• 如果你是手动配置webpack而非使用create-react-app，需要直接修改webpack.config.js的output配置：

  module.exports = {
    // ...其他配置
    output: {
      // ...其他output配置
      publicPath: "/<你的仓库名>/"
    }
  };
  

  修改后重新构建并上传即可。

关于嵌入CSS/JS无效的说明 #

你尝试嵌入内容仍未解决，大概率是因为项目中还有其他静态资源（如favicon、图片）仍使用错误路径，或是嵌入操作未覆盖所有资源引用。优先通过配置公共路径的方式从根源解决，比手动嵌入更可靠。

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