如何解决 vue-cli-service:在 heroku 上找不到道具?

Question

我在尝试删除名为tr3的应用程序时遇到问题(在本地主机上运行良好，我还学会了使用heroku部署"测试应用程序"，一切都很好(。 但是现在，当我使用命令时

git push heroku master

有一条消息

remote: -----> Compressing...
remote:        Done: 22.2M
remote: -----> Launching...
remote:        Released v8
remote:        https://stark-oasis-45806.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/stark-oasis-45806.git
12055ef..fbc5e05  master -> master

但是链接 https://stark-oasis-45806.herokuapp.com/会导致错误

020-06-19T17:42:19.575287+00:00 app[web.1]: > tr3@0.1.0 start /app
2020-06-19T17:42:19.575288+00:00 app[web.1]: > npm run  serve
2020-06-19T17:42:19.575288+00:00 app[web.1]: 
2020-06-19T17:42:20.037740+00:00 app[web.1]: 
2020-06-19T17:42:20.037766+00:00 app[web.1]: > tr3@0.1.0 serve /app
2020-06-19T17:42:20.037767+00:00 app[web.1]: > vue-cli-service serve
2020-06-19T17:42:20.037767+00:00 app[web.1]: 
2020-06-19T17:42:20.045068+00:00 app[web.1]: sh: 1: vue-cli-service: not found
2020-06-19T17:42:20.049281+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2020-06-19T17:42:20.049568+00:00 app[web.1]: npm ERR! syscall spawn
2020-06-19T17:42:20.049812+00:00 app[web.1]: npm ERR! file sh

这也是我的包.json

{
"engines": {
"node": "10.x"
},
"name": "tr3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "npm run  serve",
"heroku-postinstall": "npm install && npm run build"
},
"heroku-postinstall": "npm install && npm run build",
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.3.4",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-service": "~4.4.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.js 和 Heroku 的新手，但我能够找到这些信息来帮助我解决问题，我希望它可以帮助其他人。

在 package.json 的相同级别创建 static.json 文件：

{
"root": "dist",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}

将静态.json文件添加到git

git add static.json
git commit -m "add static configuration"

部署到 Heroku

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
git push heroku master

信息来源：部署 |Vue CLI

Answer 2

我通过运行解决了这个问题：

heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false

这篇Reddit帖子和Heroku的Skip修剪说明帮助了我。原来我的小 vue 应用程序不需要任何功能即可访问devDependencies.我不确定这是否是最合适的做法，但它解决了我的问题。

Answer 3

对于那些上述解决方案不起作用的人，你们可以尝试在依赖项中的package.json上添加"@vue/cli-service"依赖项。

说明：这是因为@vue/CLI 服务仅在 devDependencies 上，因此当您在生产环境中部署应用程序时，该依赖项不会下载到您的项目中。