In this tutorial, I’m going to share how to change a default port number in Vue.js (CLI) app. We can change port in 2 ways. Let’s see:

Method 1

If we need to run Vue app in another port temporarily, then we need to add --port option to npm run serve command. Here’s the example:

npm run serve -- --port 2020

After running app, you’ll see that the port number has changed:

DONE  Compiled successfully in 1187ms

App running at:
- Local:   http://localhost:2020/
- Network: http://192.168.42.183:2020/

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

Method 2

If we want to run an app in a specific port, then we need to create vue config file named vue.config.js in the root directory of the project.

In this config file, we have to define the port number like:

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

Then run the app using  npm run serve command and you’ll notice that the port has changed.

That’s all. Thank you.