在 heroku 中部署 Vue-express-mongodb webapp (MEVN) 时出错

Question

这是我第一次将项目上传到 Heroku。我使用 ExpressJS - MongoDB - VueJS 创建了一个小型 Web 应用程序，它可以在本地完美运行。尝试使用 Heroku - Github 方法（我没有使用 Heroku-cli）将其上传到 Heroku 时，在该过程即将结束时出现以下错误：

internal/modules/cjs/loader.js:818
throw err;
^
Error: Cannot find module '@vue/cli-plugin-eslint'
Require stack:
- /tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js
- /tmp/build_a092ddb4/client/node_modules/@vue/cli-service/bin/vue-cli-service.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
at Function.Module._load (internal/modules/cjs/loader.js:667:27)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at idToPlugin (/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js:145:14)
at /tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js:184:20
at Array.map (<anonymous>)
at Service.resolvePlugins (/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js:170:10)
at new Service (/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js:32:25)
at Object.<anonymous> (/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/bin/vue-cli-service.js:15:17) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/lib/Service.js',
'/tmp/build_a092ddb4/client/node_modules/@vue/cli-service/bin/vue-cli-service.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.BrlqB/_logs/2022-02-18T04_31_38_608Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Food-Spending@1.0.0 build: `npm install --prefix client && npm run build --prefix client`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the Food-Spending@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.BrlqB/_logs/2022-02-18T04_31_38_623Z-debug.log
-----> Build failed
   
   We're sorry this build is failing! You can troubleshoot common issues here:
   https://devcenter.heroku.com/articles/troubleshooting-node-deploys
   
   If you're stuck, please submit a ticket so we can help:
   https://help.heroku.com/
   
   Love,
   Heroku
   
!     Push rejected, failed to compile Node.js app.
!     Push failed

有谁知道为什么进程失败：模块'@vue/cli-plugin-eslint'？ 以前，它一直在部署过程中与@vue/cli-service 相关的其他依赖项引发错误，但我能够解决它们......但是，我一直无法找到解决此错误的方法。

这是来自 Vuejs 端的 package.json 文件的代码：

{
  "name": "client",
  "version": "0.1.0",
  "engines": {
     "node": "12.x"
   },
   "private": true,
   "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint"
   },
  "dependencies": {
      "axios": "^0.25.0",
      "bootstrap": "^5.1.3",
      "bootstrap-vue": "^2.21.2",
      "core-js": "^3.6.5",
      "vue": "^2.6.14",
      "@vue/cli-service": "~4.5.0",
      "@vue/cli-plugin-babel": "~4.5.0"
  },
  "devDependencies": {
      "@vue/cli-plugin-babel": "~4.5.0",
      "@vue/cli-plugin-eslint": "~4.5.0",
      "@vue/cli-service": "~4.5.0",
      "babel-eslint": "^10.1.0",
      "eslint": "^6.7.2",
      "eslint-plugin-vue": "^6.2.2",
      "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
  "extends": [
     "plugin:vue/essential",
     "eslint:recommended"
  ],
  "parserOptions": {
      "parser": "babel-eslint"
   },
   "rules": {}
  },
 "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

最后，在网上几乎没有搜索后，我解决了这个问题。我做了下一个：

注意：此更改仅用于生产。

首先，我删除了现有的 vue 项目，并创建了一个没有 eslint/formatted 选项的新项目。然后，在 package.json 和 package-lock.json 文件中，我在“dependencies”中添加了这些“devDependencies”：

"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"

package.json 文件中的更新：

"dependencies": {
  "axios": "^0.25.0",
  "bootstrap": "^5.1.3",
  "bootstrap-vue": "^2.21.2",
  "core-js": "^3.6.5",
  "vue": "^2.6.14",
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-service": "~4.5.0",
  "vue-template-compiler": "^2.6.11"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-service": "~4.5.0",
  "vue-template-compiler": "^2.6.11"
},

通过这些更改，我的应用程序最终得以部署并按预期工作。 我不确定这是否是最好的解决方案，或者是否还有其他更好的解决方案，但我会找出答案。