How to solve vue-cli-service: not found proplem on heroku?

Question

I have problem trying to deply my app named tr3 (, which is working good on localhost, and I also learned to deploy "test app" using heroku, everything was fine). But now, when I have used command

git push heroku master

There is a message

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

But link https://stark-oasis-45806.herokuapp.com/ leads to an error

020-06-19T17:42:19.575287+00:00 app[web.1]: > [email protected] 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]: > [email protected] 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

Also here is my package.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

I had the same problem a few days ago, I am new with Vue.js and Heroku, but I was able to find this information which helped me with the problem and I hope it helps other people.

Create the static.json file at the same level of package.json:

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

Add static.json file to git

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

Deploy to Heroku

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

Source of information: Deployment | Vue CLI

Answer 2

I solved this issue by running:

heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false

I was helped by this Reddit post and Heroku's Skip pruning instructions. Turns out my little vue app with no functionality needed to access devDependencies. I'm not sure if this is the most appropriate thing to do, but it solved my problem.

Answer 3

For those who the above solutions didnt work you guys can try add "@vue/cli-service" dependencie on your package.json in dependencies.

explanation: this is because @vue/cli-service is only on devDependencies so when you deploy ur app on production that dependencie is not being downloaded in your project.