将 Vite.js React 构建部署到 gh-pages

Question

我在将 SPA 应用程序部署到 gh-pages 时遇到问题，我不确定自己做错了什么。首先，我构建项目，然后将构建目录部署到同一存储库的 gh-pages 子树。

当我访问 deployment URL 时，我看到的是空白页。

我的vite.config.js

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

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

Answer 1

经过几个小时的研究，我发现当您使用 react-router-dom > v4 并部署到子域（例如 /read-track 在我的例子中）时，您有在 <BrowserRouter> 上提供具有子域值的 basename 属性。在我的例子中，我必须像这样传递它 <BrowserRouter basename="/read-track">

将 Vite.js React 构建部署到 gh-pages

Deploying Vite.js React build to gh-pages

deployment

github-pages

reactjs

react-router-dom

vite