由于未找到“vue-cli-service”，MEVN 应用程序部署到 Heroku 失败答案

【问题标题】：MEVN app deployment to Heroku failed because of 'vue-cli-service' not found由于未找到“vue-cli-service”，MEVN 应用程序部署到 Heroku 失败
【发布时间】：2020-10-23 18:07:02
【问题描述】：

所以，我尝试按照 Traversy 的教程 (https://www.youtube.com/watch?v=71wSzpLyW9k) 将我的 MEVN 应用程序部署到 Heroku。我遵循了他在教程中概述的所有步骤。他的教程是针对 MERN 堆栈的，但是除了前端框架之外它非常相似，所以我认为它也适用于我的 MEVN 应用程序。

本教程的主要部分是将这个 sn-p 添加到我的 app.js：

if(process.env.NODE_ENV === 'production') {
    //Set static folder
    app.use(express.static('client/build'));

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    });
}

以及 package.json 中的这个脚本：

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

“heroku-postbuild”脚本是在我执行“git push heroku master”时运行的，所以在尝试构建客户端之前，部署似乎可以正常工作。

构建日志的详细信息如下：

-----> Node.js app detected
   
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 12.x...
       Downloading and installing node 12.18.2...
       Using default npm version: 6.14.5
       
-----> Installing dependencies
       Installing node modules
       
       > puppeteer@3.0.1 install /tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/node_modules/puppeteer
       > node install.js
       
       
       
       > nodemailer@6.4.6 postinstall /tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/node_modules/nodemailer
       > node -e "try{require('./postinstall')}catch(e){}"
       
       === Nodemailer 6.4.6 ===
       
       Thank you for using Nodemailer for your email sending needs! While Nodemailer
       itself is mostly meant to be a SMTP client there are other related projects in
       the Nodemailer project as well.
       
       For example:
       > IMAP API (  https://imapapi.com  ) is a server application to easily access
       IMAP accounts via REST API
       > NodemailerApp (  https://nodemailer.com/app/  ) is a cross platform GUI app to
       debug emails
       
       
       > node-cron@2.0.3 postinstall /tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/node_modules/node-cron
       > opencollective-postinstall
       
       
       > bcrypt@4.0.1 install /tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/node_modules/bcrypt
       > node-pre-gyp install --fallback-to-build
       
       make: Entering directory '/tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/node_modules/bcrypt/build'
         CC(target) Release/obj.target/nothing/../node-addon-api/src/nothing.o
         AR(target) Release/obj.target/../node-addon-api/src/nothing.a
         COPY Release/nothing.a
         CXX(target) Release/obj.target/bcrypt_lib/src/blowfish.o
         CXX(target) Release/obj.target/bcrypt_lib/src/bcrypt.o
         CXX(target) Release/obj.target/bcrypt_lib/src/bcrypt_node.o
         SOLINK_MODULE(target) Release/obj.target/bcrypt_lib.node
         COPY Release/bcrypt_lib.node
         COPY /tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node
         TOUCH Release/obj.target/action_after_build.stamp
       make: Leaving directory '/tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/node_modules/bcrypt/build'
       
       > nodemon@2.0.2 postinstall /tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/node_modules/nodemon
       > node bin/postinstall || exit 0
       
       Love nodemon? You can now support the project via the open collective:
        > https://opencollective.com/nodemon/donate
       
       added 332 packages in 24.401s
       
-----> Build
       Running heroku-postbuild
       
       > server@1.0.0 heroku-postbuild /tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a
       > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
       
       
       > core-js@3.6.4 postinstall /tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/client/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       added 15 packages from 14 contributors and audited 1360 packages in 9.661s
       
       2 packages are looking for funding
         run `npm fund` for details
       
       found 261 low severity vulnerabilities
         run `npm audit fix` to fix them, or `npm audit` for details
       
       > client@0.1.0 build /tmp/build_44931d5da2ada9ea8e2cd227fa7e5a8a/client
       > vue-cli-service build
       
sh: 1: vue-cli-service: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! client@0.1.0 build: `vue-cli-service build`
npm ERR! spawn ENOENT
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.Bldog/_logs/2020-07-03T02_19_47_442Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! server@1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the server@1.0.0 heroku-postbuild 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.Bldog/_logs/2020-07-03T02_19_47_458Z-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
       
       Some possible problems:
       
       - Node version not specified in package.json
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed
Build finished
heroku.com

我找不到处理“vue-cli-service”未找到的特殊情况的解决方案，所以我在这里问。

编辑：

根文件夹 package.json

"dependencies": {
    "bcrypt": "^4.0.1",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-session": "^1.17.0",
    "express-validator": "^6.4.0",
    "mongoose": "^5.9.10",
    "morgan": "^1.9.1",
    "node-cron": "^2.0.3",
    "nodemailer": "^6.4.6",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "puppeteer": "^3.0.1"
  },
  "devDependencies": {
    "concurrently": "^5.2.0",
    "nodemon": "^2.0.2"
  }

客户端文件夹 package.json

"dependencies": {
    "@vue/cli": "^4.4.6",
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "fs": "0.0.1-security",
    "lodash": "^4.17.15",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vuetify": "^2.2.14",
    "vuex": "^3.1.3",
    "vuex-persist": "^2.2.0",
    "websocket-extensions": "^0.1.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.0",
    "@vue/cli-plugin-eslint": "^4.2.0",
    "@vue/cli-service": "^4.4.6",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "node-sass": "^4.13.1",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-vuetify": "^2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  }

【问题讨论】：

cli.vuejs.org/guide/deployment.html#heroku
我也遇到过这个问题，也是在 Traversy 课之后。最终在本地构建前端并将构建文件夹上传到 heroku
@DavidGo，所以我猜你最终部署了两个应用程序，前端和后端？
我只部署后端部分，并在 Vue 配置 outputDir 中使用这个 commsnd 将构建的前端放到它的文件夹中：path.resolve(__dirname, '../public'),
顺便说一句，我记得这个视频对我有帮助，也许你应该看看youtube.com/watch?v=5PaUiPyBDJY&t=481s

标签： vue.js heroku vue-cli

【解决方案1】：

我假设您已安装 Heroku CLI，登录并连接到您的 github 帐户。

如果是这样，这就是我部署项目的方式。

...

我创建了一个新分支，即 deployBranch

然后在前端文件夹中我运行了'npm run build'。

我已将“dist”文件夹复制到项目文件夹中。

在后端文件（server.js 或在您的情况下为 app.js）我在路由之后添加了这段代码：

const trajectory = path.resolve();

if (process.env.NODE_ENV === "production") {
    app.use(express.static(path.join(trajectory, "/dist")));
    app.get("*", (req, res) =>
        res.sendFile(path.resolve(trajectory, "dist", "index.html"))
    );
}

（如果不将 heroku-postbuild 脚本添加到 package.json 并从主项目文件夹中的 .gitignore 文件中删除 /dist有一个）

在此之后，我将所有更改提交到一个新分支。

git push --set-upstream origin deployBranch

然后在 heroku 中，我创建了新项目。在部署部分 'App connected to GitHub' 我已将其连接到我的项目 github repo。

我在'Manual deploy'中将分支改为deployBranch并选择'deploy branch'

之后剩下要做的就是在 .env 的 settings 中添加 config vars

【讨论】：