Heroku 部署期间未找到 Vite 错误

Question

背景

因此，我一直在尝试使用 Heroku 部署 Express 服务器来静态服务 React 前端 SPA，并托管一组 RESTful API。在由 Express 服务器提供服务之前，前端使用

vite build

命令构建到 dist 文件中。

代码存储库可以在这里找到：https://github.com/ndrw1221/full-stack-personal-page

问题

所以构建过程在本地运行成功，但是当我尝试部署到Heroku时（通过

git push heroku main

），我遇到了这个错误，说找不到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.
...

失败的尝试

我尝试了以下解决方案，但都没有解决问题：

1. 调整构建行为：通过运行以下命令配置 Heroku 以在构建过程中安装 devDenpendency：

   heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false

   。

2. Moving Vite to Dependencies：将 vite 包从 devDependencies 移至 dependency。 前端/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"
  }
}

3. 清除 Heroku 上的构建缓存：运行

   heroku repo:purge_cache -a <my-app>

   ，然后进行空提交，最后运行

   git push heroku main

   。

4. 从源代码管理中删除node_modules：如标题中建议。

5. 指定 Node 和 Yarn 版本：在 package.json 中指定 Node 和 Yarn 版本。 package.json

"engines": {
    "node": "20.11.1",
    "yarn": "1.22.22"
  },

因此，尽管进行了所有尝试，我仍无法解决上述问题。我想知道Heroku和Vite之间是否存在兼容性问题或支持问题，或者我的代码是否有问题。谢谢你。

Answer 1

我现在解决了。事实证明，在 cd 进入每个目录后，您必须

yarn

。所以修正后的版本应该是这样的：

package.json

 "scripts": {
    "start": "cd backend && yarn && yarn start",
    "build": "cd frontend && yarn && yarn build"
  }