How to change port number in vue-cli project

Changing the port number in a Vue CLI project is a common requirement, as the default port may conflict with other services or because specific ports are needed for deployment purposes. This can be achieved by modifying the project's configuration file.

Step 1: Modify the vue.config.js File

Vue CLI projects typically have a configuration file named vue.config.js in the root directory. If this file does not exist, you can create it manually.

In the vue.config.js file, you can set a devServer object to configure the development server options, including the port number. For example, to change the port to 8081, you can set it as follows:

javascript
module.exports = {
  devServer: {
    port: 8081
  }
};

Step 2: Restart the Development Server

After modifying the configuration file, you need to restart the development server to apply the new settings. You can restart the server by terminating the current server process and then re-running npm run serve.

Example

Suppose you are developing a Vue application, and the local port 8080 is occupied by another application. You need to change the Vue application's port to 5500. First, check if the vue.config.js file exists in the project root directory. If it does not exist, create it and add the following configuration:

javascript
module.exports = {
  devServer: {
    port: 5500
  }
};

Then, stop the current development server (typically by pressing Ctrl + C in the terminal), and re-run npm run serve. Now, the development server should start on the new port 5500 instead of the default 8080 port.

Thus, by simply modifying the configuration and restarting the server, you can change the port number of the Vue CLI project to avoid port conflicts or meet specific deployment requirements.