Vite-React项目部署GitHub Pages后空白且报404错误求助

针对你遇到的问题，按以下步骤逐一排查修复：

• 配置Vite基础路径
  由于GitHub Pages部署在子路径下（你的项目路径是/vite-project/），必须在vite.config.js中指定base字段：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/vite-project/' // 填写你的仓库名称
  })
  

• 添加部署脚本并安装依赖

  1. 安装gh-pages工具：

     npm install gh-pages --save-dev
     

  2. 在package.json中补充部署相关配置：

     {
       "scripts": {
         "dev": "vite",
         "build": "vite build",
         "preview": "vite preview",
         "predeploy": "npm run build",
         "deploy": "gh-pages -d dist"
       },
       "homepage": "/vite-project/"
     }
     

• 确认GitHub Pages部署源
  进入仓库的Settings -> Pages页面，确保部署源选择的是gh-pages分支的/(root)目录，而非其他分支或路径。

• 路由适配（若使用React Router）
  GitHub Pages不支持SPA的路由重写，若项目用了React Router，需替换为HashRouter避免刷新页面404：

  import { HashRouter as Router, Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          {/* 其他路由配置 */}
        </Routes>
      </Router>
    );
  }
  

• 重新部署
  执行部署命令，确保构建产物正确上传：

  npm run deploy
  

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