How to Change default port in vuejs application

How to Change default port in vuejs application

This tutorial explains how to change the default port in a Vue project created using the Vue CLI tool and the webpack dev server.

What is the default port of vuejs?

The Vue application is generated with the Vue CLI tool using the vue create command. By default, applications created with the default package.json scripts have the following configuration:

  "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 web server listening on port 8080.

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.

Default port is 8080 with application running with the Vue CLI as well as the webpack dev server.

This tutorial covers multiple ways to change the default port in Vue.js projects.

Change the default port to new port number

The first approach involves changing the port option in a terminal window.

Open the terminal and 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.

Keep in mind that this approach requires passing the option every time you run the command, making it a temporary solution.

The second approach simplifies the process 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 Vue.js Application?

Vue CLI internally uses a webpack dev server.

  • Create a vue.config.js in the root of your project
  • Add the following 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

This tutorial discussed multiple ways to configure the default port change in the Vue application using the --port option and the webpack devServer port option.