How to change the port of a Vue application

Vue.js is a popular front-end JavaScript framework that helps developers create single-page applications (SPA), mobile applications, desktop applications, and cross-platform applications more easily. Normally, when we use Vue for development, we use the default port (8080), but in some cases, we need to deploy the Vue application to a different port to meet our needs.

Next, this article will show how to change the port of a Vue application.

1. Modify the configuration file

The configuration file of Vue.js is vue.config.js, you can change the Vue application by modifying this file port. Add the following code to the file:

module.exports = {
  devServer: {
    port: 8888 // 修改为你想要的端口号
  }
}

In the above code, you can see that the devServer field is used to configure the development server, and the port field is used to specify the port number. Just replace 8888 in the code with the port number you want to use.

2. Using command line parameters

The port of the Vue application can also be changed using command line parameters. Run the following command in a terminal or command prompt:

npm run serve -- --port 8888  // 修改为你想要的端口号

In the above command, the --port parameter is used to specify the port number to use, replace 8888 in the code Just replace with the port number you want to use.

3. Using environment variables

You can also use environment variables to change the port of your Vue application. Set an environment variable named PORT in your system or server, set its value to your desired port number, and start the Vue application.

PORT=8888 npm run serve  // 修改为你想要的端口号

In the above command, the PORT environment variable is used to specify the port number to use, replace 8888 in the code with the port number you want to use That’s it.

Summary:

In actual development, we often need to deploy Vue applications to different ports to meet needs. This article introduces three common methods of changing the Vue application port: by modifying the configuration file, using command line parameters, and using environment variables. Developers can choose the method that best suits them based on actual needs to better manage and deploy Vue applications.

The above is the detailed content of How to change the port of a Vue application. For more information, please follow other related articles on the PHP Chinese website!