How to Change default port in vuejs application

This tutorial covers how to change the default port in the Vue project, created using the Vue CLI tool.

What is the default port of vuejs

Vue application is created with vue-cli tool using vue create command. By default applications created with default, package.json scripts are as follows

  "scripts": {
        "serve": "vue-cli-service serve",
        "start": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    }

When you run npm run serve or npm run start it starts the webserver listens at 8080 port.

B:\vue-app>npm run start
 DONE  Compiled successfully in 9556ms


  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.29.53:8081/

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

This post covers multiple ways to change the default port in vuejs projects.

The first way is to change the port option in a terminal window

In the terminal, Pass -- -- port 7000 option to npm command.

B:\vue-app>npm run start  -- --port  7000

> vue-google-font@0.1.0 start B:\blog\jswork\vue-google-font
> vue-cli-service serve "--port" "7000"

 DONE  Compiled successfully in 1836ms


  App running at:
  - Local:   http://localhost:7000/
  - Network: http://192.168.29.53:7000/

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

It always needs to pass the option when you are running every time with the command line. This approach is temporary.

Second, The same can be simplified by changing the scripts block in package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "start": "vue-cli-service serve --port 7000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

changing port with webpack devserver

VueCli uses a webpack dev server internally.

• Create a vue.config.js in the root of your project
• Add the below content to the vue.config.js file

module.exports = {
  devServer: {
    historyApiFallback: true,
    port: 7000,  
    noInfo: true,
    overlay: true
  },
}

Change property port to the desired port number in the devserver section.

Conclusion

Discussed multiple ways to configure default port change in Vue application with –port option and webpack devServer port option.