How to change Vue CLI default port number

This is a quick post on how you can change the default port i.e. 8080 while running a Vue app via npm.

When you run npm run serve on your vue-cli project it runs on port 8080, if that port is busy it shifts the number by 1 and tries to run it on port 8081 and so on.

default port 8080 vue-cli

Changing the default Port

To change the default port.

1. Create a new file in the project root directory named vue.config.js
2. Add the following code, replace the port number of your choice.

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

Now, run the app using npm run serve command, your port number is successfully changed.

 DONE  Compiled successfully in 4099ms                                                                                                                                                                                            4:46:41 PM


  App running at:
  - Local:   http://localhost:6058/ 
  - Network: http://192.168.1.106:6058/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

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

Comments