Change default port number in Vue CLI App

In this short tutorial, we will learn how to change the default port number of Vue CLI Application.

When we run a Vue-CLI project using npm run serve , it runs on its default port number i.e 8080. And if the default port is busy then the port number is increased by +1 and it runs on the next port 8081 and so on.

Let’s see how to change the default port and set our own when we run our Vue application.

Change Default Port via Terminal

In Vue CLI 3.0, we can change the port just by adding the port number after the --port option. We have to append --port with the port number after npm run serve command.

npm run serve -- --port 3000

The first -- is used to pass the port option to the npm script and not to the npm itself.

This is a temporary way to change the default port number of the Vue application.

Change Port Number in package.json file

Now, if you don’t want to type the port number every time when running the Vue app, then you can just do the following change in your package.json file.

"scripts": {
    "serve": "vue-cli-service serve --host localhost --port 3000",
    "build": "vue-cli-service build"
  },

Just add the --port 3000 at the end of the serve property.

After the change, you can run the app using npm run serve and it will run the app on localhost:3000.

Change Port Number via vue.config.js

The vue.config.js is an optional config file that is loaded by @vue/cli-service automatically. Using this file to change our development server port number in Vue.

1. First, create a file in the root directory of your project and name it vue.config.js.
2. Now inside the file, add this code and change the port number of your choice. I have changed it to 4000.

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

Now when you run the app using npm run serve, you can see the given port number in your localhost. It’s changed successfully.

 DONE  Compiled successfully in 5886ms                                  3:29:06 PM

  App running at:
  - Local:   http://localhost:4000/
  - Network: http://localhost:4000/

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

Related Topics:

How To Update Vue-Cli To Latest Version?

How To Remove Hashbang (#) From URL In Vue ?