How to Change Port Number in vue-cli Project ?

In this article, we will see the detailed step-by-step process to change the port number in the Vue-Cli project. We will start straight by creating a new Vue project, and move onto the process to change the port number. We will also see the complete verification of changes done in port configuration.

Approach

In this approach, we are going to change the port number in vue.config.js file and render out vuejs file onto that server.

Steps to change the port number in vue-cli project

Step 1: Creating Vue CLI Project

In the first step, we will open or create the Vue CLI project in VScode on the Windows Operating system. We will need the Vue CLI for project creation, so first, install the below commands to install and create the Vue JS project using Vue CLI.

npm install -g @vue/cli

vue create gfg-vue-project

cd gfg-vue-project

Step 2: Navigate to vue.config.js File

Once the project is created successfully, in the Project structure, we can see the configuration file which is named vue.config.js. If the file is not present, then we can also create it manually, as this file contains all the essential configurations of the Vue Project.

Step 3: Editing vue.config.js File

Once we locate the configuration file, we need to open it for some essential updation. We need to change the port number as per our requirement. So to change, add the below code in the file:

module.exports = {
  devServer: {
    port: 8085, // your desired port number
  },
};

This will change the default port number to the new port number 8085. You can give any of the available ports from your system.

Step 4: Add Example Code

Example: For the demonstration of the application and to verify whether the port is changed or not, we will write a sample code.

// App.vue

<template>
  <div id="app">
    <p>Hello GeeksforGeeks</p>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Step 5: Run the Project

Once we have changed the configuration, we can run the project using the below command in the VScode terminal.

npm run serve

You can access the project on the web browser, by navigating to the “http://localhost:8085” (or the port number you configured).

Output: