How to modify the port in vue.js

Vue.js, as a front-end framework, needs to start a development server during the development process to implement functions such as hot loading and automatic reconstruction. By default, the Vue.js development server listens to port 8080. However, in some cases, we may need to modify the default port number to avoid conflicts or meet project requirements. The following is how to modify the default port number in a Vue.js project.

First method: using command line parameters

Vue-cli provides a simple way to modify the port, that is, add --port to the startup command Or -p parameters. For example, to change the port number to 3000, you can use the following command to start the development server:

npm run serve -- --port 3000

As you can see, two horizontal lines are added after the npm run serve command, which means The next --port 3000 is the parameter passed to the development server. After the modification is completed, the Vue application will be started on port 3000.

Second method: Modify the configuration file

In addition to using command line parameters, we can also modify the default port number by modifying the configuration file of the Vue project. In the Vue-cli 3.x version, the configuration file of the Vue project is located in the vue.config.js file in the project root directory. If the file does not exist, you can create it manually.

In the vue.config.js file, we can modify the default port number by passing configuration parameters to the devServer object. For example, the following code changes the port number to 3000:

module.exports = {
  devServer: {
    port: 3000
  }
}

It should be noted that if we find that the Vue application cannot be started after modifying the port and prompts the error message "Port is occupied", it may be because of this The port is already occupied by another application. At this time, we need to select another port number and modify the corresponding configuration file or command line parameters.

In short, whether you use command line parameters or modify the configuration file, you can easily modify the default port number of the Vue.js development server to meet the needs of different projects. At the same time, being familiar with these configuration techniques will also help us better understand the Vue.js framework and improve development efficiency and code quality.

The above is the detailed content of How to modify the port in vue.js. For more information, please follow other related articles on the PHP Chinese website!