How to change port number in vue-cli project
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.
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 toserve
script:scripts.serve=vue-cli-service serve --port 4000
- CLI Option
--port
tonpm 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