C

21

222

How to change the Port number in the Vue-CLI project so that it runs on another port instead of 8080.

Compassionate answered 10/11, 2017 at 9:45 Comment(1)

On macOS, please remember about this https://mcmap.net/q/120418/-trying-to-change-port-to-80-on-webpack-dev-server-gives-error – Carrick 7/10, 2021 at 12:6

M

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

Marchioness answered 10/11, 2017 at 11:38 Comment(10)

In the latest vuejs version. The file is no longer used, instead using: <your_project_root>/vue.config.js. – Grindelia 7/6, 2018 at 12:39

Your answer is correct, but please mention Vue version. – Cantaloupe 31/7, 2018 at 22:29

do you mean the vue-cli version? vue version has no effect on this – Marchioness 31/7, 2018 at 22:38

The file myApp/config/index.js does not exist! – Psychiatrist 2/9, 2018 at 12:37

Vue CLI 3 uses vue.config.js at project root. It has to be created manually IIRC. – Daughterinlaw 3/10, 2018 at 22:9

there is no vue.config.js there – Endanger 9/11, 2018 at 1:18

sorry, I think with the latest update it has changed, you can update the answer one you figure it out – Marchioness 9/11, 2018 at 18:39

"scripts": { "serve": "vue-cli-service serve --port 80" }, – Allix 28/6, 2019 at 4:44

Since this is the (un)helpful first listed response you also want to check: cli.vuejs.org/config/#vue-config-js under some sub section it is shown. – Heaney 7/3, 2020 at 19:9

Also, you can use npm run serve -- --port 8085 – Saprogenic 12/3, 2020 at 7:3

P

258

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/

Privy answered 14/7, 2018 at 20:16 Comment(3)

You saved me precious time, as the first -- is not written in the doc: 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! – Mantelpiece 16/8, 2018 at 18:18

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", – Incessant 13/9, 2019 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. – Gracchus 1/6, 2022 at 6:32

K

161

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:

Keller answered 26/10, 2018 at 11:6 Comment(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! – Clipper 26/2, 2019 at 19:36

@Clipper Thanks, I verified it and added it to the answer. – Keller 1/3, 2019 at 7: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." cli.vuejs.org/config/#devserver Am I missing something? Anybody else having issues? – Alsatia 18/8, 2019 at 19:39

@Alsatia - This was reported yesterday in the VueJS CLI Repository Issues: github.com/vuejs/vue-cli/issues/4452 It is saying to install portfinder (github.com/http-party/node-portfinder) as there was a breaking change which happened with that. – Mosra 19/8, 2019 at 16:26

@Clipper this has done the trick in my case also. Thanks wwerner for the respose. – Chopin 28/7, 2022 at 8:26

B

51

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.

Bouchard answered 5/5, 2018 at 13:13 Comment(0)

M

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
  }