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

缘起

哈喽！（瞬间就想到了开场白：亲爱的朋友们，我又回来了🤞），今天新开了一个专题，主要讲平时我开发中遇到的调试技巧。

为何要写这个呢，下边是一个场景，我之前还真没这么用过，举个栗子，咱们平时在开发 Web 的时候，总会遇到几个下边的调试状况，感谢 @前辈闺蜜 提出这个疑问（不知道能不能看到，不知道帐号😂）：

 

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

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

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

四、并且还有一种状况，台式机的网线网络，和手机链接的 WIFI 可能不在同一个局域网内，尴尬了。   // 感受我像在找茬......

 

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

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

 

1、在 PC 上发布 Vue 项目

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

一、打包 Vue

直接在项目根目录，直接  

npm run build

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

 

二、部署到 IIS

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

一、右键新建站点；

二、配置站点；

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

 

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

 

 

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

一、手机须要一根数据线

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

 

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

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

 

3、获取此时的站点 URL

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

（ 查找本机 IP 地址）

 

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

IPV4和IPV6的区别：

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

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

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

2、报头格式的简化

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

3、对可选项更大的支持

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

4、QoS的功能

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

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

5、身份验证和保密

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

6、安全机制IPSec是必选的

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

7、增强了对移动设备的支持

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

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

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

 

因此，这个时候，咱们的站点就是  http://192.168.0.104:9001 ，是否是能够直接访问了呢，先别着急开心，这个时候咱们访问，仍是不行的，由于咱们尚未开放端口协议。

 

4、配置防火墙规则

这里有两个方法：

一、简单粗暴，直接把防火墙关闭，很差，危险不说，有时候咱们尚未权限，必须是 Administrator。

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

 

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

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

 

很简单，直接上动图：

 

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

 

 

 

5、结语

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