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

【问题标题】：Deploying Vite.js React build to gh-pages将 Vite.js React 构建部署到 gh-pages
【发布时间】：2022-01-20 12:19:27
【问题描述】：

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

当我访问deployment URL 时，我遇到了一个空白页面。

GitHub Repo

我的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()]
})

【问题讨论】：

到底是什么问题？不清楚您所说的“部署问题”是什么意思。
@tromgy 抱歉，当我访问已部署的链接时，我面临一个空白页面。这是部署链接omar-labana.github.io/read-track
您似乎遇到了与此stackoverflow question 类似的问题。 index.html 中的 URL 需要与 read-track 相关。那个问题是关于包裹的，你用的是vite，但它应该能给你一些线索。

标签： reactjs deployment react-router-dom github-pages vite

【解决方案1】：

经过数小时的研究，我发现当您使用react-router-dom > v4 并部署到子域（例如我的情况下为/read-track）时，您必须提供basename 属性<BrowserRouter> 与子域值。在我的情况下，我必须像这样通过它<BrowserRouter basename="/read-track">

【讨论】：