How to change port number in vue-cli project

Question

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/

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:

• https://cli.vuejs.org/config/#devserver
• https://cli.vuejs.org/config/#vue-config-js
• https://cli.vuejs.org/guide/mode-and-env.html

Vue CLI v2 (deprecated)

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

References:

• http://vuejs-templates.github.io/webpack/
• https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35

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.

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

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.

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

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