React部署Github Pages后资源路径错误致页面空白求助

解决方案步骤： #

• 步骤1：配置Vite基础路径
  在项目根目录创建或修改vite.config.js，添加base配置（值为你的GitHub仓库名称，注意前后斜杠）：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/Elizabeth-Law-Firm/'
  })
  

• 步骤2：调整路由basename配置
  Vite不支持process.env.PUBLIC_URL，改用Vite内置的import.meta.env.BASE_URL设置HashRouter的basename：

  ReactDOM.createRoot(document.getElementById('root')).render(
      <React.StrictMode>
          <HashRouter basename={import.meta.env.BASE_URL}>
              <Routes>
                  <Route path="/" element={<Home />} />
                  <Route path="/contact" element={<Contact/>} />
                  <Route path="/about" element={<About />} />
                  <Route path="/practices" element={<PracticeAreas />} />
              </Routes>
          </HashRouter>
      </React.StrictMode>
  )
  

• 步骤3：重新构建部署
  执行命令重新生成构建文件并部署：

  npm run build
  npm run deploy
  

问题原因： #

Vite默认以根路径（/）生成资源引用，但你的站点部署在GitHub Pages的子路径/Elizabeth-Law-Firm/下，导致浏览器错误地去根路径请求资源，从而触发404。配置vite.config.js的base选项后，Vite会自动为所有资源路径添加子路径前缀，同时路由的basename确保跳转逻辑匹配子路径结构。

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