Vue 项目本地局域网内访问

前言： 先简单了解下本地域名及IP地址

127.0.0.1、localhost、0.0.0.0、本机IP地址

localhost

在计算机网络中，localhost是给回路网络接口（loopback）的一个标准主机名，相对应的IP地址为127.0.0.1（IPv4）和[::1]（IPv6），localhost指向的IP地址是可以配置的。

不联网，不使用网卡，不受防火墙和网卡限制，本机访问

127.0.0.1

凡是以127开头的IP地址，都是回环地址（Loop back address），其所在的回环接口一般被理解为虚拟网卡，并不是真正的路由器接口。

所谓的回环地址，通俗的讲，就是我们在主机上发送给127开头的IP地址的数据包会被发送的主机自己接收，根本传不出去，外部设备也无法通过回环地址访问到本机。

一般会通过ping 127.0.0.1来测试某台机器上的网络设备是否工作正常。

不联网，网卡传输，受防火墙和网卡限制，本机访问

0.0.0.0

首先，0.0.0.0是不能被ping通的。在服务器中，0.0.0.0并不是一个真实的的IP地址，它表示本机中所有的IPV4地址。监听0.0.0.0的端口，就是监听本机中所有IP的端口。

本机 IP

本机IP，我们可以理解为本机有三块网卡，一块网卡叫做loopback（虚拟网卡），一块叫做ethernet（有线网卡），一块叫做wlan（你的无线网卡）。

联网，网卡传输，受防火墙和网卡限制，本机或外部访问

---

Vue项目本地运行localhost、手机IP都能访问

1. 查看本机IP地址。

  `windows ipconfig    / mac ifconfig

2. 修改package.json文件中添加–host 0.0.0.0，然后重新重启项目。

"scripts": {
    
    
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
}

3. 在浏览器导航栏中输入：http://ip+端口访问项目运行。注意这里确保访问时时同一网段，否则，就无法访问。

[参考资料]

https://www.jianshu.com/p/39c1730bebb2
https://www.jianshu.com/p/ad7cd1d5be45
https://blog.csdn.net/qq_30541261/article/details/103955305