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?

https://stackoverflow.com/questions/47219819/how-to-change-port-number-in-vue-cli-project — Helping hand, Oct 04 '19 at 06:54
@Helpinghand I already read that there is no such file in my project — manish thakur, Oct 04 '19 at 06:56

score 15 · Answer 1 · answered Oct 04 '19 at 07:19

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

score 6 · Answer 2 · answered Jan 27 '20 at 20:21

6

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

npm run serve -- --port 8086

answered Jan 27 '20 at 20:21

virtuvious

2,362
2
21
22

1

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)`. – ibnɘꟻ Sep 02 '21 at 03:13

score 5 · Answer 3 · answered Oct 04 '19 at 07:09

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.

Super Kai - Kazuya Ito · Answer 4 · 2023-08-24T11:22:14.203

1

With npm:

npm run serve --port 8086

With yarn:

yarn serve --port 8086

edited Aug 24 '23 at 11:22

answered Nov 22 '21 at 18:16

Super Kai - Kazuya Ito

22,221
10
124
129

score 0 · Answer 5 · answered Dec 30 '22 at 08:46

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,
  },
});

score 0 · Answer 6 · answered Jan 18 '23 at 01:11

0

in vue.config.js

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

answered Jan 18 '23 at 01:11

user7331530

815
1
12
21

score -4 · Answer 7 · answered Sep 11 '20 at 11:13

-4

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

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

answered Sep 11 '20 at 11:13

Utkir

1

3

You should never change anything directly in `node_modules` – Hiws Sep 11 '20 at 11:29

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

7 Answers7