从壹开始 [ 学调试 ]║ 轻松实现 PC端+移动端的本地同步联调

缘起

哈喽！今天新开了一个专题，主要讲平时我开发中遇到的调试技巧，就不寒暄了哈哈，有点像单口相声

为什么要写这个呢，这个得说明下场景，感谢前辈小伙伴提出这个疑问（不知道能不能看到哈哈），我以前还真没注意过，举个栗子，我们平时在开发 Web 的时候，总会遇到几个下边的调试情况：

1、开发的时候，虽然可以在 PC 模仿手机来调试，但是还是想直接在手机看看效果如何？ // 可能只有部署到公网服务器了；

2、你可能会说，傻呀，发布到本地 IIS 代理，然后同一个局域网，用 ip+端口 来访问呀！ // 那如果没有网呢？

3、可能更生气的说，直接手机开热点！这不就是同一个局域网了么 ！ // 那如果是台式机呢？

4、而且还有一种情况，台式机的网线网络，和手机连接的 WIFI 可能不在同一个局域网内，尴尬了。 // 感觉我像在找茬......

这个时候，问题就来了，你怎么用手机来访问你 PC 机上的 IIS 站点？

欸？！我在路上突然想到了一个办法，这里直接分享一下，内容很简单，不多做解释，一二三四直接往下走就行。

一、在 PC 上发布 Vue 项目

这里是用 IIS 的方式，当然你也可以使用 nginx 进行代理转发。

1、打包 Vue

直接在项目根目录，直接

npm run build

然后就会在根目录下边，发现一个 dist 文件夹。就是它了，拖走。。。

2、部署到 IIS

这个就简单的不能再简单了，直接来个动图解决：

1、右键新建站点；

2、配置站点；

3、启动站点，并检查访问，是否正常

image

注意，这个时候，我们访问的还是 localhost 本地域名，我们的手机是无法访问的，而且要注意，我们的手机和 PC 不在同一个局域网内，这是我们本文讨论的意义！那到底如何要把两个终端连在一起呢，请往下看。

二、将 PC 和手机拽到同一个局域网内

1、手机需要一根数据线

将我们的手机连上 PC，然后在网络设计的热点中，打开 USB 调试，这个应该都会，找不到的自行百度，大概就是这个酱紫：

image

这个时候神奇的事情就发生了，我们的 PC 机，无论有没有连着网络，自动的会切换到手机网络里，这就是已经拽到了同一个局域网啦！这个时候我们可以使用WiFi ，也可以使用流量，我一般都是使用的流量，更稳定些。

那这个时候就剩下最后一个问题了，手机端如何访问呢，我们知道，我们访问站点，只能通过 IP 地址，localhost 本地域名是不行的，那如何获取现在 PC 站点的 URL 呢？请往下看。

三、获取此时的站点 URL

上边我们说到了连接上了手机的 USB 热点共享后，我们就造了一个小的局域网，这个时候我们的 PC 机的 IP 地址肯定变了，具体的方法，在命令窗户，使用 ipconfig 来查看本机 ip 地址：

image

（ 查找本机 IP 地址）

这里说下，前辈问过的问题：

IPV4和IPV6的区别：

一、扩展了路由和寻址的能力

IPv6把IP地址由32位增加到128位，从而能够支持更大的地址空间，估计在地球表面每平米有4*10^18个IPv6地址，使IP地址在可预见的将来不会用完。

IPv6地址的编码采用类似于CIDR的分层分级结构，如同电话号码。简化了路由，加快了路由速度。在多点传播地址中增加了一个“范围”域，从而使多点传播不仅仅局限在子网内，可以横跨不同的子网，不同的局域网。

二、报头格式的简化

IPv 4报头格式中一些冗余的域或被丢弃或被列为扩展报头，从而降低了包处理和报头带宽的开销。虽然IPv6的地址是IPv4地址的4倍。但报头只有它的2倍大。

三、对可选项更大的支持

IPv6的可选项不放入报头，而是放在一个个独立的扩展头部。如果不指定路由器不会打开处理扩展头部.这大大改变了路由性能。IPv6放宽了对可选项长度的严格要求(IPv4的可选项总长最多为40字节)，并可根据需要随时引入新选项。IPV6的很多新的特点就是由选项来提供的，如对IP层安全(IPSEC)的支持，对巨报(jumbogram)的支持以及对IP层漫游(Mobile-IP)的支持等。

四、QoS的功能

因特网不仅可以提供各种信息，缩短人们的距离.还可以进行网上娱乐。网上VOD现正被商家炒得热火朝天，而大多还只是准VOD的水平，且只能在局域网上实现，因特网上的VOD都很不理想.问题在于IPv4的报头虽然有服务类型的字段，实际上现在的路由器实现中都忽略了这一字段。

在IPv6的头部，有两个相应的优先权和流标识字段，允许把数据报指定为某一信息流的组成部分，并可对这些数据报进行流量控制。如对于实时通信即使所有分组都丢失也要保持恒速，所以优先权最高，而一个新闻分组延迟几秒钟也没什么感觉，所以其优先权较低。IPv6指定这两字段是每一IPv6节点都必须实现的。

五、身份验证和保密

在IPv6中加入了关于身份验证、数据一致性和保密性的内容。

六、安全机制IPSec是必选的

IPv4的是可选的或者是需要付费支持的。

七、加强了对移动设备的支持

IPv6在设计之初有有着支持移动设备的思想，允许移动终端在切换接入点时保留相同的IP地址。

八、支持无状态自动地址配置

IPv6无需DNS服务器也可完成地址的配置，路由广播地址前缀，各主机根据自己MAC地址和收到的地址前缀生成可聚合全球单播地址。这也方便了某一区域内的主机同时更换IP地址前缀。

所以，这个时候，我们的站点就是 http://192.168.0.104:9001 ，是不是可以直接访问了呢，先别着急开心，这个时候我们访问，还是不行的，因为我们还没有开放端口协议。

四、配置防火墙规则

这里有两个方法：

1、简单粗暴，直接把防火墙关闭，不好，危险不说，有时候我们还没有权限，必须是 Administrator。

2、配置入站规则，我使用的这个方法。

win7防火墙入站规则：别人电脑访问自己电脑的规则；

win7防火墙出站规则：自己电脑访问别人电脑的规则。

很简单，直接上动图：

image

这个时候，我们就可以很轻松的解决文章开头提出来的问题了：不在同一个局域网的台式机和手机，如何在手机上访问站点。

五、结语

嗯，挺简单的，下次再见了，每个加油的小伙伴，都是最靓的崽！哈哈哈