Can I change the default port from 8080 to something else in Vue?

Question

I have been working on Vue.js and Node.js to build my app. When I have started with Vue it is by default running on 8080 and Node I am running on 3008.

What I am trying to do is due to some circumstances I want to change the port for Vue from 8080 to any other like 8086 or 3005. How can I do that?

Answer 1

Simply you can run the following command to run vue app as per your required port :

npm run serve --port 8086

Another way is to update the serve script command in your package.json file. Just append --port 8086 like so:

"scripts": {
  "serve": "vue-cli-service serve --port 8086",
  "build": "vue-cli-service build",
  "inspect": "vue-cli-service inspect",
  "lint": "vue-cli-service lint"
}

Answer 2

If you don't have one create vue.config.js in the root dir of your project and there add this option:

module.exports = {
   devServer: {
      port: 8086
   }
}

In webpack docs you can see all the available options for configuring the dev server.

Check also vue-cli docs.

Answer 3

This is the way! ...that worked for me!

npm run serve -- --port 8086