How to Run Vue.js (CLI) App in Different Port

Published on April 25, 2020 36 sec read

HIRE US 🖐
We're available to do freelance project. Take a look at our services!

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:

vue.config.js
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. 🙂

Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.

Follow

Leave a Reply

Your email address will not be published. Required fields are marked *