vue.js - 由于未找到“vue-cli-service”,MEVN 应用程序部署到 Heroku 失败
问题描述
因此,我尝试按照 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"
“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"
}
解决方案
我假设您已经安装了 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的设置中添加配置变量
推荐阅读
- angular - 尝试在 Angular 中为 Google 图表创建新的 DataTable 时无法识别 google.visialization 类
- jquery - 如何将 DateTimePicker-time-interval 添加到 DateTimePicker-inputs 作为 disabledTimeIntervals?
- azure-active-directory - 无法使用 Microsoft Graph API 获得管理员同意和访问令牌
- python - 包含变量类型的打印语句
- java - 如何查看参数格式(例如 /verify
) while typing?
- c++ - Can't pass twice pointer with braces
- python-3.7 - 我试图制作一个没有 pygame(带字母)的控制台游戏。但我不知道我必须写什么
- angular - Structural directives and lazy loaded modules inheritance
- android - Data consumption for on-demand map downloading
- r - 同一情节中的不同配色方案