如何实现局域网内，访问自己本地VUE项目

需求说明

大家好，作为一个全栈工程师，前端肯定是要会写的，不知道大家是否遇到过这样的一个需求场景： 产品/测试提出了一个样式效果调整或者屏幕适配的问题，你自己本地改好了，然后想让对方预览，那怎么办呢？今天我们就研究下！

比较常见的解决方案有这些：

1、本地开发好后发布，在线预览（过程麻烦且繁琐）。

2、本地起一个服务器，比如nginx，对方配置host，指向你的ip（也还行）。

3、直接用VUE起一个node服务就好了（推荐）。

第二种方案其实就是第一种方案的本地化，我也使用过，也是一个不是办法的办法，其实在局域网中，只要我们能ping的通ip地址，起一个端口，就可以在局域网内访问。

这种方案可以使用在后端接口项目里，前端不太适合，因为前端有Cookie和其他问题必须用域名来操作，所以配置host是刚需的。

VUE项目本地开发，其他是起一个Node服务，并且可以指定Host，下面我们来看看具体的方案，示例项目是Blog.Admin。

配置VUE启动服务的Host

这里可以配置任意的host——默认的是localhost，它就是本地域名，也可以配置其他域名，比如local.neters.club，也可以直接配置ip地址，或者127.0.01。如果要实现局域网内访问你本地效果，就需要设置0.0.0.0。

这样配置完成后，项目启动效果是这样的：

 App running at:
  - Local:   http://localhost:2364/  
  - Network: http://192.168.1.7:2364/

这里咱们简单讲个课，说说上面四种host的区别和联系：

1、localhost其实是域名，一般windows系统默认将localhost指向127.0.0.1，但是localhost并不等于127.0.0.1，localhost指向的IP地址是可以配置的。

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

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

本地和对方配置Host

修改自己和对方的host文件，这个ip由VUE启动的时候，非localhost的那个ip地址。

可以先在对方电脑上，ping一下自己的ip地址，看是否能通过。

到这里，就可以在两个电脑上预览效果了，两个电脑同时方式，自己本地开发后，对方电脑也能同时预览到效果，是实时的，这个是VUE的功能了。

是不是很简单，尝试一波吧。

对了，可能会有防火墙的问题和局域网但不在同一个网段问题，也要作为异常的排查对象哟。

END