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

Published on April 25, 2020 36 sec read

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:

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. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.

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