React项目部署GitHub Pages后空白页及部署报错求助

算力阿峰

2026-6-16

解决Vite React项目部署GitHub Pages的问题

一、先解决Deploy时的目录找不到错误

你遇到的ENOENT: no such file or directory, stat '.../build'错误，核心原因是Vite默认构建输出目录是dist，但你的deploy脚本指向了build，同时homepage字段末尾有多余空格，按以下步骤修复：

修正package.json的两处配置：

{
  "homepage": "https://farabi-momin.github.io/react_test", // 去掉末尾空格
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist", // 把build改成dist
    // 其他脚本保持不变
  }
}

重新执行构建和部署命令：

npm run build
npm run deploy

执行成功后，GitHub仓库会自动生成gh-pages分支，你就能在Pages设置里看到该选项了。

二、解决部署后空白页问题

空白页通常是资源路径或路由配置错误导致的，补充以下配置：

配置Vite的基础路径
在项目根目录的vite.config.js中添加base字段（对应你的GitHub仓库名称）：

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

export default defineConfig({
  plugins: [react()],
  base: '/react_test/'
});

修正React Router的基础路径
如果你使用了react-router-dom，需要给路由组件设置basename，确保路由匹配正确：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/react_test">
      {/* 你的路由内容 */}
    </BrowserRouter>
  );
}