How to set a fixed IP address in Vue

In daily development, we often need to use the Vue framework for development in the local development environment. During the development process, our Vue application does not support external access, so we need to set a fixed IP address. To access, this article will introduce how to set a fixed IP address in Vue.

1. Change the default port

The access address is usually http://localhost:8080. We can change the default port number to the port number we need. Here we use the port number as 8000 For example, the specific operations are as follows:

1. Open the config/index.js file in the project root directory.
2. Find the dev object and change the value of its port attribute to the port number you need, as shown in the following code:

dev: {
  port: 8000,
  // ...
}

3. After saving the file, run the following command and restart Start the project:

npm run dev

At this time our access address will change from http://localhost:8080 to http://localhost:8000, To facilitate our subsequent operations.

2. Modify host

If we want other devices in the same LAN to access our application, we can add the fixed IP address we need in the host file. The specific operations are as follows:

1. Enter notepad in the system search bar and run it as administrator.
2. Open the hosts file in the C:\Windows\System32\driver\etc directory.
3. Add the following code at the end of the file to bind the domain name localhost to the fixed IP address we need.

# 网站IP绑定
127.0.0.1       localhost
192.168.1.100   localhost

Where 192.168.1.100 is the fixed IP address we bound, which can be replaced with the IP address you need.

4. After saving the hosts file, restart the computer.
5. Open CMD or terminal, enter the ipconfig command, find the LAN you are currently connected to, and record the IPv4 address.
6. Find the devServer object in the config/index.js file in the project root directory, and change the value of its host attribute to your IPv4 address, as shown in the following code:

devServer: {
  host: '192.168.1.100', // 记得替换成你的 IPv4 地址
  // ...
}

7. Rerun the project and enter http://192.168.1.100:8000 in the browser to access the application.

3. Conclusion

The above is how to set a fixed IP address in Vue, which allows us to access our application more conveniently on other devices within the same LAN. Hope this article is helpful to everyone.

The above is the detailed content of How to set a fixed IP address in Vue. For more information, please follow other related articles on the PHP Chinese website!