How to Change default port in vuejs application

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?

The vue application is created with the vue-cli tool using the 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 the 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 the -- -- port 7000 option to the npm command.

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

> [email protected] 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"
},

How to change the default port with the webpack dev server in the VueJS Application?

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 the property port to the desired port number in the devserver section.

Conclusion

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