由于找不到“ vue-cli-service”，将MEVN应用部署到Heroku失败

时间：2020-07-03 03:51:39

标签： vue.js heroku vue-cli

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

本教程的主要部分是将该代码段添加到我的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"

当我执行“ git push heroku master”时，运行了“ heroku-postbuild”脚本，因此直到开始尝试构建客户端之前，部署似乎一直可以正常工作。

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

-----> 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"
  }

1 个答案:

答案 0 :(得分：0)

我假设您已安装 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中，我创建了新项目。 在部署部分“应用程序连接到 GitHub”中，我已将其连接到我的项目 github 存储库。

我已在“手动部署”中将分支更改为 deployBranch 并选择“部署分支”

之后剩下要做的就是在.env的设置中添加配置变量

相关问题
最新问题