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?

Interpol

#47220319 – Electrode

@Helpinghand I already read that there is no such file in my project – Interpol

What cli or from where did you get starting vue project? – Electrode

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

Extent

Answer 2

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

npm run serve -- --port 8086

Flotilla

Thanks. I have used run npm run serve --port 8081, but it ends up with error message TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type number (8081). – Orography

Answer 3

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.

Zamir

Answer 4

With npm:

npm run serve --port 8086

With yarn:

yarn serve --port 8086

Minuet

Answer 5

If you are using vite as your build tool, you can override the default port with the one you want by providing a server.port entry in the vite configuration file - vite.config.js

In the example below, I set the default port to 8086

export default defineConfig({
  ...

  server: {
    port: 8086,
  },
});

Cusk

Answer 6

in vue.config.js

module.exports = defineConfig({
  ...
  devServer: {
    port: 8086,
  },

Semibreve

Answer 7

VueJS 2 with npm (you can do either):

npm run serve --port=8086
npm run serve --port=3005

VueJS 2 with yarn (you can do either):

yarn serve --port=8086
yarn serve --port=3005

VueJS 3 with npm (you can do either):

npm run dev --port=8086
npm run dev --port=3005

VueJS 3 with yarn (you can do either):

npm run serve --port=8086
npm run serve --port=3005

You can also do the other answers, like changing the ports in vue.config.js

Please note that if port 8080 was occupied when you first started the VueJS app, there is an app that uses it and the initial remedy is to restart your Laptop/PC.

Nashua

Answer 8

DIR: node_modules@vue\cli-service\lib\commands CHANGE FILE: serve.js

const defaults = { host: '0.0.0.0', port: 8086, https: false }

Harijan

You should never change anything directly in node_modules – Cassycast