Heroku部署Express+React项目时Vite not found错误求助

云原生阿岚

2026-6-26

背景

我尝试用Heroku部署一个Express服务器，用来静态托管React前端SPA并提供RESTful API。前端通过vite build命令构建成dist文件后，由Express服务器托管。

代码仓库地址：https://github.com/ndrw1221/full-stack-personal-page

问题

本地构建正常，但执行git push heroku main部署到Heroku时，出现Vite包未找到的错误：

...
remote: -----> Build
remote: Running build (yarn)
remote: yarn run v1.22.22
remote: $ cd frontend && yarn build
remote: $ vite build
remote: /bin/sh: 1: vite: not found
remote: error Command failed with exit code 127.
remote: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
remote: error Command failed with exit code 127.
remote: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
...

已尝试的无效解决方案

调整构建配置：执行命令heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false，配置Heroku在构建时安装devDependencies。

迁移Vite至Dependencies：将vite包从devDependencies移至dependencies。
前端package.json内容：

{
  "name": "personal-page",
  "private": true,
  "version": "0.0.0",
  "homepage": "https://ndrw1221.github.io/personal-page",
  "type": "module",
  "scripts": {
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d dist",
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.18",
    "@heroicons/react": "^2.1.1",
    "date-fns": "^3.6.0",
    "gh-pages": "^6.1.1",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3",
    "sort-by": "^1.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.2.8"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1"
  }
}

清除Heroku构建缓存：执行heroku repo:purge_cache -a <my-app>，随后提交空提交，最后执行git push heroku main。
移除版本控制中的node_modules：已完成该操作。
指定Node和Yarn版本：在package.json中添加了版本指定。
package.json中新增内容：
```
"engines": {
    "node": "20.11.1",
    "yarn": "1.22.22"
  },
```

所有方案均无效，想确认是否存在Heroku与Vite的兼容性问题，或是代码本身存在问题，寻求解决办法。

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