How To Change Port Number In Vue.js App

Introduction

In this article, we will learn how to change port number in vue.js application. When we run a Vue.js project using the npm run serve command, the default port number 8080 assigned to the Vue.js app.

Create VueJS Project

Create a Vue.js project by using the following command,

vue create progressapp

We can change the port number in vue.js app by using the three ways

1. Change Port Number Temporarily using terminal
2. Change Port Number in package.json file
3. Change Port Number in vue.config.js

Change Port Number Temporarily using terminal

We can change the port number by adding the --port 'required port number' after npm run serve command.

 npm run serve -- --port 7690

run the following command and check

Change Port Number in package.json file

We can change port number by making change in package.json file,add the following change in scripts section in package.json file

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

now run the appliction using num run serve command.

Change Port Number in vue.config.js

Now open vue.config.js file and add the following code.

const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
    transpileDependencies: true,devServer: {
    port: 7800
   }
})

Now run the application.

Summary

In this article, we learned how to change port number in vue.js application.