调整目录结构后ViteJS配置及Vercel部署报错问题排查

问题原因 #

你把Vite依赖、构建脚本都放在了frontend目录的package.json中，但Vercel默认会在项目根目录执行构建命令。根目录的package.json没有安装Vite，所以执行vite build时会提示找不到命令。

解决方案 #

方案1：指定Vercel构建根目录（推荐） #

这是最直接的解决方式，让Vercel直接在frontend目录下执行构建流程：

1. 打开Vercel控制台，找到你的项目
2. 进入Settings → Build & Development Settings
3. 在Root Directory输入框中填写frontend
4. 保存设置后，手动触发一次重新构建

这样Vercel会自动进入frontend目录，安装该目录下的依赖（包括Vite），然后执行package.json里的build脚本。

方案2：根目录统一管理构建脚本 #

如果需要从根目录统一管理前后端的启动/构建命令，可以修改根目录的package.json：

{
  "scripts": {
    "build": "cd frontend && npm install && npm run build",
    "dev:frontend": "cd frontend && npm run dev",
    "dev:backend": "node backend/server.js"
  }
}

• 根目录不需要安装Vite等前端依赖，所有前端依赖保持在frontend/package.json中
• 执行npm run build时，会自动进入frontend目录完成依赖安装和构建

注意事项 #

• 确保frontend目录的package-lock.json已提交到GitHub，Vercel需要它来精准安装依赖
• 检查vite.config.js中的loadEnv(mode, process.cwd())：当指定Root Directory为frontend后，process.cwd()会指向frontend目录，环境变量读取正常；如果根目录有.env需要前端读取，建议移到frontend/.env，或者在Vercel控制台的Environment Variables中配置
• 确认frontend目录的.gitignore没有误排除node_modules外的必要文件（比如index.html、src目录等）

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