How to change port number in vue-cli project

Question

How to change Port number in Vue-cli project so that it run's on another port instead of 8080.

On macOS, please remember about this https://stackoverflow.com/a/46813423/13762066 — Pawel Ka, Oct 07 '21 at 12:06

score 250 · Answer 1 · answered Jul 14 '18 at 20:16

250

If you're using vue-cli 3.x, you can simply pass the port to the npm command like so:

npm run serve -- --port 3000

Then visit http://localhost:3000/

answered Jul 14 '18 at 20:16

Nick Litwin

2,875
2
13
13

20

You saved me precious time, as the first `--` is not written in the doc: https://cli.vuejs.org/guide/cli-service.html#using-the-binary. I was typing `npm run serve --port 3000` which seems logical to me, but I got errors... Thumbs up! – toni07 Aug 16 '18 at 18:18
13

That's because the first `--` escapes the parameters given to `npm run serve` and _not_ to `vue-cli-service`. If you edit `package.json` and the `serve` command directly, you enter it as shown in the documentation: `"serve": "vue-cli-service serve --port 3000",` – MatsLindh Sep 13 '19 at 13:16
While this answer is good and has most up-votes (mine too ;)), I prefer `package.json` change in order not to have to give port to command every time but have it persistent and automatic in `npm run serve` command. – gluttony Jun 01 '22 at 06:32

wwerner · Answer 2 · 2019-03-01T07:47:04.970

158

Late to the party, but I think it's helpful to consolidate all these answers into one outlining all options.

Separated in Vue CLI v2 (webpack template) and Vue CLI v3, ordered by precedence (high to low).

Vue CLI v3

package.json: Add port option to serve script: scripts.serve=vue-cli-service serve --port 4000
CLI Option --port to npm run serve, e.g. npm run serve -- --port 3000. Note the --, this makes passes the port option to the npm script instead of to npm itself. Since at least v3.4.1, it should be e.g. vue-cli-service serve --port 3000.
Environment Variable $PORT, e.g. PORT=3000 npm run serve
.env Files, more specific envs override less specific ones, e.g. PORT=3242
vue.config.js, devServer.port, e.g. devServer: { port: 9999 }

References:

Vue CLI v2 (deprecated)

Environment Variable $PORT, e.g. PORT=3000 npm run dev
/config/index.js: dev.port

References:

edited Mar 01 '19 at 07:47

answered Oct 26 '18 at 11:06

wwerner

4,227
1
21
39

5

Looks like this changed a tad in latest vue cli (using 3.4.1), here's my "serve" line in package.json: `"serve": "vue-cli-service serve --port 4000",`. Works great! – RoccoB Feb 26 '19 at 19:36
@RoccoB Thanks, I verified it and added it to the answer. – wwerner Mar 01 '19 at 07:47
The answers above don't seem to work in v3 at this date. I tried the .env option, package.json, vue.config.js, and CLI command option but they all get ignored. The config file docs say "Some values like `host`, `port` and `https` may be overwritten by command line flags." https://cli.vuejs.org/config/#devserver Am I missing something? Anybody else having issues? – Ryan Aug 18 '19 at 19:39
2

@Ryan - This was reported yesterday in the VueJS CLI Repository Issues: https://github.com/vuejs/vue-cli/issues/4452 It is saying to install portfinder (https://github.com/http-party/node-portfinder/) as there was a breaking change which happened with that. – Angelo Aug 19 '19 at 16:26
@RoccoB this has done the trick in my case also. Thanks wwerner for the respose. – A. Dzebo Jul 28 '22 at 08:26

TomyJaya · Answer 3 · 2018-07-13T02:05:06.710

As the time of this answer's writing (May 5th 2018), vue-cli has its configuration hosted at <your_project_root>/vue.config.js. To change the port, see below:

// vue.config.js
module.exports = {
  // ...
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080, // CHANGE YOUR PORT HERE!
    https: false,
    hotOnly: false,
  },
  // ...
}

Full vue.config.js reference can be found here: https://cli.vuejs.org/config/#global-cli-config

Note that as stated in the docs, “All options for webpack-dev-server” (https://webpack.js.org/configuration/dev-server/) is available within the devServer section.

samayo · Accepted Answer · 2018-04-03T21:48:37.553

40

The port for the Vue-cli webpack template is found in your app root's myApp/config/index.js.

All you have to do is modify the port value inside the dev block:

 dev: {
    proxyTable: {},
    env: require('./dev.env'),
    port: 4545,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    cssSourceMap: false
  }

Now you can access your app with localhost:4545

also if you have .env file better to set it from there

edited Apr 03 '18 at 21:48

answered Nov 10 '17 at 11:38

samayo

16,163
12
91
106

34

In the latest vuejs version. The file is no longer used, instead using: /vue.config.js. – Jianwu Chen Jun 07 '18 at 12:39
Your answer is correct, but please mention Vue version. – killjoy Jul 31 '18 at 22:29
do you mean the vue-cli version? vue version has no effect on this – samayo Jul 31 '18 at 22:38
5

The file `myApp/config/index.js` does not exist! – exhuma Sep 02 '18 at 12:37
6

Vue CLI 3 uses vue.config.js at project root. It has to be created manually IIRC. – Ege Ersoz Oct 03 '18 at 22:09
3

there is no vue.config.js there – Geomorillo Nov 09 '18 at 01:18
sorry, I think with the latest update it has changed, you can update the answer one you figure it out – samayo Nov 09 '18 at 18:39
34

`"scripts": { "serve": "vue-cli-service serve --port 80" },` – Sudhir K Gupta Jun 28 '19 at 04:44
Since this is the (un)helpful first listed response you also want to check: https://cli.vuejs.org/config/#vue-config-js under some sub section it is shown. – Dirk Schumacher Mar 07 '20 at 19:09
1

Also, you can use `npm run serve -- --port 8085` – WiRight Mar 12 '20 at 07:03

score 25 · Answer 5 · edited Aug 19 '18 at 00:58

25

Another option if you're using vue cli 3 is to use a config file. Make a vue.config.js at the same level as your package.json and put a config like so:

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

Configuring it with the script:

npm run serve --port 3000

works great but if you have more config options I like doing it in a config file. You can find more info in the docs.

edited Aug 19 '18 at 00:58

Stephen Rauch

47,830
31
106
135

answered Aug 19 '18 at 00:37

derFBeste

381
4
7

1

I like this answer as it shows that vue.config.js can be used to just change the port and leave everything else as-is which is what was asked originally. – Twisted Oct 01 '19 at 09:45

score 24 · Answer 6 · answered Oct 12 '18 at 11:53

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

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

score 23 · Answer 7 · answered Oct 29 '20 at 07:04

First Option:

OPEN package.json and add "--port port-no" in "serve" section.

Just like below, I have done it.

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8090",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

Second Option: If You want through command prompt

npm run serve --port 8090

score 17 · Answer 8 · edited Mar 17 '20 at 18:21

17

If you want to change the localhost port, you can change scripts tag in package.json:

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

edited Mar 17 '20 at 18:21

colidyre

4,170
12
37
53

answered Mar 17 '20 at 18:02

Fatih Başar

201
3
4

score 11 · Answer 9 · answered Feb 03 '18 at 12:13

In the webpack.config.js:

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

You can change the port in the module.exports -> devServer -> port.

Then you restrat the npm run dev. You can get that.

score 9 · Answer 10 · answered Jul 03 '20 at 13:57

Oh my God! It is not that much complicated, with these answers which also works. However, other answers tho this question also works well.

If you really want to use the vue-cli-service and if you want to have the port setting in your package.json file, which your 'vue create <app-name>' command basically creates, you can use the following configuration: --port 3000. So the whole configuration of your script would be like this:

...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...

I am using @vue/cli 4.3.1 (vue --version) on a macOS device.

I have also added the vue-cli-service reference: https://cli.vuejs.org/guide/cli-service.html

This answer duplicates one on this page from 3 years ago: https://stackoverflow.com/a/60727863/401467 — datashaman, Sep 26 '20 at 09:51

score 7 · Answer 11 · answered Sep 03 '18 at 15:23

7

An alternative approach with vue-cli version 3 is to add a .env file in the root project directory (along side package.json) with the contents:

PORT=3000

Running npm run serve will now indicate the app is running on port 3000.

answered Sep 03 '18 at 15:23

Chris Dickson

71
1
1

score 7 · Answer 12 · edited Dec 07 '19 at 09:50

There are a lot of answers here varying by version, so I thought I'd confirm and expound upon Julien Le Coupanec's answer above from October 2018 when using the Vue CLI. In the most recent version of Vue.js as of this post - vue@2.6.10 - the outlined steps below made the most sense to me after looking through some of the myriad answers in this post. The Vue.js documentation references pieces of this puzzle, but isn't quite as explicit.

Open the package.json file in the root directory of the Vue.js project.
Search for "port" in the package.json file.
Upon finding the following reference to "port", edit the serve script element to reflect the desired port, using the same syntax as shown below:
```
"scripts": {
  "serve": "vue-cli-service serve --port 8000",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}
```
Make sure to re-start the npm server to avoid unnecessary insanity.

The documentation shows that one can effectively get the same result by adding --port 8080 to the end of the npm run serve command like so: npm run serve --port 8080. I preferred editing the package.json directly to avoid extra typing, but editing npm run serve --port 1234 inline may come in handy for some.

score 7 · Answer 13 · edited Feb 09 '23 at 05:31

7

If you use yarn:

yarn serve --port 3000

edited Feb 09 '23 at 05:31

sideshowbarker

81,827
26
193
197

answered Aug 22 '21 at 04:38

Super Kai - Kazuya Ito

22,221
10
124
129

score 5 · Answer 14 · edited Sep 25 '21 at 01:50

5

To change the port (NPM), go to package.json. In scripts write your own script, for example:

"start": "npm run serve --port [PORT YOU WANT]"

After that you can start with npm start

"scripts":{"start":"npm run serve --- --port 3000"}

edited Sep 25 '21 at 01:50

Laurel

5,965
14
31
57

answered Jul 22 '21 at 08:56

jetpack024

51
1
1

1

Please provide a detailed explanation to your answer, in order for the next user to understand your answer better. Also, provide a basic coverage of the content of your link, in case it stops working in the future. – Elydasian Jul 23 '21 at 13:37

score 5 · Answer 15 · edited Jul 19 '22 at 14:54

5

open package.json
add script named serve, "serve": "Vue-cli-service serve --port 8081"
npm run serve you will server run 8081

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8081", 
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

edited Jul 19 '22 at 14:54

Batuhan

1,521
12
29

answered Jul 17 '22 at 01:39

DONGWON

61
1
5

score 3 · Answer 16 · answered Sep 01 '19 at 16:43

3

Add the PORT envvariable to your serve script in package.json:

"serve": "PORT=4767 vue-cli-service serve",

answered Sep 01 '19 at 16:43

Dominic

62,658
20
139
163

score 3 · Answer 17 · answered Mar 07 '22 at 08:44

3

If you want to change the port number temporarily, you can add a –port option to npm run serve command.

npm run serve -- --port 6058

answered Mar 07 '22 at 08:44

mohammad

31
2

score 2 · Answer 18 · answered Jul 20 '22 at 01:30

2

You should be good with this:

"serve": "vue-cli-service serve --port 8081",

answered Jul 20 '22 at 01:30

vargashj

33
6

score 1 · Answer 19 · answered Apr 14 '19 at 19:35

In my vue project in visual studio code, I had to set this in /config/index.js. Change it in the:

module.exports = {
    dev: {
          // Paths
          assetsSubDirectory: 'static',
          assetsPublicPath: '/',
          proxyTable: {},

          host: 'localhost', // can be overwritten by process.env.HOST
          port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
          autoOpenBrowser: false,
          errorOverlay: true,
          notifyOnErrors: true,
          poll: false    
         }
}

I almost did the same. My file's name is 'vue.config.js' and is located at the root of the vue project. The demanded port is found on path module.exports.dev.port. Here it is set to 8090. The other key-value-pairs are not necessary (for me). That's for starting with 'npm run serve' on development mode! — Dirk Schumacher, May 03 '21 at 11:51

score 0 · Answer 20 · answered Aug 23 '22 at 15:32

If you are running this via Visual Studio Community or Professional (maybe with a .Net Core project) you will find that no matter what steps you do, when you launch the solution that it uses 8080.

Well there is launch.json file you need to edit hidden in the .vscode directory. MS don't tell you about this at all and a file search does not seem to find it.

score -2 · Answer 21 · answered Jan 21 '20 at 08:41

-2

Go to node_modules/@vue/cli-service/lib/options.js
At the bottom inside the "devServer" unblock the codes
Now give your desired port number in the "port" :)

devServer: {
   open: process.platform === 'darwin',
   host: '0.0.0.0',
   port: 3000,  // default port 8080
   https: false,
   hotOnly: false,
   proxy: null, // string | Object
   before: app => {}
}

answered Jan 21 '20 at 08:41

MRIDUAVA

141
1
4

6

go to node_modules/@vue/cli-service ... ? Doesn't that get overwritten on npm update? – Joeri Feb 05 '20 at 10:11
you don't want to make code edits - should be configurable – Poat Jan 20 '22 at 16:38

How to change port number in vue-cli project

21 Answers21

Vue CLI v3

Vue CLI v2 (deprecated)

Linked