缘起

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

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

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

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

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

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

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

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

一、在 PC 上发布 Vue 项目

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

1、打包 Vue

直接在项目根目录，直接

<pre style="color: rgb(0, 0, 0); font-family: "Courier New"; font-size: 12px; margin: 5px 8px; padding: 5px;">npm run build</pre>

然后就会在根目录下边，发现一个 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

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

五、结语

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