部署React项目到GitHub Pages遇空白页及bundle.js 404问题求助

问题详情 #

部署React项目到GitHub Pages后页面持续空白，控制台报错：GET https://ziaddalii.github.io/bundle.js net::ERR_ABORTED 404，项目使用HashRouter进行路由管理。

路由配置 #

<HashRouter basename="/drippy-e-commerce">
  <AuthProvider>
    <ProductsContext>
      <Navbar />
      
      <Routes>
        <Route exact path='/' element={<Home/>} />
        <Route path='/signup' element={<Signup/>} />      
        <Route path='/signin' element={<Signin/>} />  
        <Route path="/products/:productId" element={<ProductPage/>} />  
        <Route path="/addresses" element={<Addresses/>} />  
        <Route path="/accessories" element={<Accessories/>} />  
        <Route path="/shoes" element={<Shoes/>} />  
        <Route path="/jackets" element={<Jackets/>} />  
        <Route path="/sales" element={<Sales/>} />  
          
      </Routes>
      <Footer/>
      <Chat/>
    </ProductsContext>
  </AuthProvider>
</HashRouter>

package.json配置 #

{
  "homepage": "./",
  "name": "drippy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist -b new-gh-page",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^9.1.0",
    "connect-history-api-fallback": "^2.0.0",
    "dotenv": "^16.0.3",
    "firebase": "^9.16.0",
    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-chatbot-kit": "^2.1.2",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.0",
    "react-scripts": "^5.0.1",
    "react-use": "^17.4.0",
    "swiper": "^8.4.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "css-loader": "^6.7.2",
    "dotenv-webpack": "^8.0.1",
    "file-loader": "^6.2.0",
    "gh-pages": "^5.0.0",
    "html-webpack-plugin": "^5.5.0",
    "react-app-env": "^1.2.3",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1"
  }
}

已尝试操作 #

• 将homepage改为"https://ziaddalii.github.io/drippy-e-commerce/"
• 调整deploy命令为gh-pages -d dist
• 等待部署生效超过24小时

解决方案 #

1. 配置webpack的publicPath #

在webpack.config.js中添加publicPath配置，确保资源打包后指向项目子路径：

module.exports = {
  // ...其他webpack配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/drippy-e-commerce/' // 与GitHub Pages子路径一致
  }
}

2. 修正package.json的homepage #

将homepage设置为项目完整的GitHub Pages地址：

"homepage": "https://ziaddalii.github.io/drippy-e-commerce/"

3. 确认GitHub Pages部署分支 #

检查仓库的Pages设置：

• 如果使用默认gh-pages分支，修改deploy命令为：

  "deploy": "gh-pages -d dist"
  

• 如果坚持使用new-gh-page分支，确保GitHub Pages设置中选择该分支作为部署源。

4. 重新打包部署 #

执行命令重新构建并部署：

npm run build
npm run deploy

原因说明 #

控制台的404错误是因为打包后的bundle.js请求路径为根域名下的/bundle.js，但项目部署在子路径/drippy-e-commerce/下，资源实际路径应为/drippy-e-commerce/bundle.js。通过设置webpack的publicPath和package.json的homepage，可以让打包后的资源路径自动适配子路径，解决加载错误。

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