ReactJS应用本地正常，部署GitHub Pages后显示空白求助

1. 确认Vite配置文件的base路径 #

Vite部署到GitHub Pages（子路径站点）必须配置正确的base参数，否则资源会加载失败导致空白：
打开vite.config.js，确保添加base配置：

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

export default defineConfig({
  plugins: [react()],
  base: '/travel_journal-reactjs/' // 填写你的仓库名称
})

2. 检查package.json的脚本配置 #

确保scripts包含正确的构建和部署命令，并且已安装gh-pages依赖：

• 安装依赖：npm install gh-pages --save-dev
• 配置scripts：

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

3. 验证GitHub Pages的部署源 #

进入你的GitHub仓库设置 -> Pages，确认：

• 部署分支选择gh-pages
• 目录选择/(root)

4. 检查浏览器控制台错误 #

打开网站的开发者工具（F12），切换到Console标签页，查看是否有404资源加载错误。如果是路径错误，说明base配置未生效，重新执行部署命令。

5. 重新部署流程 #

1. 删除本地的dist文件夹和gh-pages分支（若存在异常）
2. 重新执行npm run deploy
3. 等待GitHub Pages完成部署（通常需要1-5分钟）

内容的提问来源于stack exchange，提问作者AFRA TARANUM A