React/Vite项目部署GitHub Pages后显示空白页求助

问题场景 #

React.js + Vite项目部署到GitHub Pages后页面空白，已尝试常规方案未解决，相关配置代码如下：

vite.config.js #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/redberry-bootcamp'
})

package.json #

{
  "name": "redberry-bootcamp",
  "homepage": "http://n1kushach.github.io/redberry-bootcamp",
  "private": false,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "@hookform/resolvers": "^2.9.10",
    "axios": "^1.3.2",
    "gh-pages": "^5.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.0",
    "react-router-dom": "^6.8.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }
}

App.jsx #

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home } from "./pages/Home";
import { Info } from "./pages/Info";
import { Education } from "./pages/Education";
import { Experience } from "./pages/Experience";
import { useState, useEffect } from "react";

function App() {
  const [mainData, setMainData] = useState();
  const [img, setImg] = useState();
  const apiData = new FormData()
  
    useEffect(() => {
      sessionStorage.setItem("mainData", JSON.stringify(mainData));
    }, [mainData])

  return (
    <div className="App">
      <Router basename="/redberry-bootcamp/">
        <Routes>
          <Route path="/" element={<Home mainData={mainData} setMainData={setMainData} />} />
          <Route path="/info" element={<Info img={img} setImg={setImg} apiData={apiData} mainData={mainData} setMainData={setMainData} />} />
          <Route path="/experience" element={<Experience img={img} setImg={setImg}  apiData={apiData}  mainData={mainData} setMainData={setMainData}/>}/>
          <Route path="/education" element={<Education img={img} setImg={setImg}  apiData={apiData}  mainData={mainData} setMainData={setMainData}/>}/>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

修复方案 #

1. 统一路由基准路径格式 #

vite.config.js中base为/redberry-bootcamp，但App.jsx里Router的basename多了末尾斜杠，导致路由匹配冲突。修改App.jsx的Router配置：

<Router basename="/redberry-bootcamp">

2. 优化package.json的homepage配置 #

将硬编码的HTTP地址改为相对路径，适配不同环境：

"homepage": "/redberry-bootcamp"

3. 重新构建部署 #

执行以下命令重新生成构建文件并发布到GitHub Pages：

npm run build
npm run deploy

额外排查步骤 #

• 打开浏览器开发者工具（F12），查看控制台是否有JS报错（如路由匹配失败、变量未定义）
• 查看网络标签，确认静态资源（JS/CSS/图片）的请求路径是否正确，是否返回404错误

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