Vite-React项目部署GitHub Pages时遇ENOENT文件不存在错误求助

错误原因 #

Vite默认的构建输出目录是dist，但你的部署脚本可能在尝试访问build目录（Create React App默认用build，但Vite的默认输出目录不同），导致gh-pages找不到对应路径，抛出ENOENT错误。

解决步骤 #

• 修改package.json中的部署脚本：
  打开项目根目录的package.json，找到scripts里的deploy命令，把指向build的部分改成dist。示例：

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

  更稳妥的写法是让deploy先执行构建再部署，避免手动遗漏构建步骤：

  "deploy": "vite build && gh-pages -d dist"
  

• 配置Vite的base路径（关键）：
  如果你的项目部署在GitHub Pages的项目仓库（URL格式为https://<你的用户名>.github.io/<仓库名>/），需要在vite.config.js中设置base为仓库名称：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/<你的仓库名称>/' // 替换成实际仓库名，比如/jewellry/
  })
  

• 手动确认dist目录生成：
  先单独执行npm run build，检查项目根目录是否生成了dist文件夹，且内部包含html、css、js等构建产物。如果没有，先排查构建环节是否报错。
• 清理依赖缓存重试：
  若上述步骤无效，删除项目根目录的node_modules和package-lock.json，重新执行npm install，再尝试npm run deploy。

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