緣起
哈嘍！（瞬間就想到了開場白：親愛的朋友們，我又回來了🤞），今天新開了一個專題，主要講平時我開發中遇到的調試技巧。
為什么要寫這個呢，下邊是一個場景，我以前還真沒這么用過，舉個栗子，我們平時在開發 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、啟動站點，並檢查訪問，是否正常
注意，這個時候，我們訪問的還是 localhost 本地域名，我們的手機是無法訪問的，而且要注意，我們的手機和 PC 不在同一個局域網內，這是我們本文討論的意義！那到底如何要把兩個終端連在一起呢，請往下看。
二、將 PC 和手機拽到同一個局域網內
1、手機需要一根數據線
將我們的手機連上 PC，然后在網絡設計的熱點中，打開 USB 調試，這個應該都會，找不到的自行百度，大概就是這個醬紫：
這個時候神奇的事情就發生了，我們的 PC 機，無論有沒有連着網絡，自動的會切換到手機網絡里，這就是已經拽到了同一個局域網啦！這個時候我們可以使用WiFi ，也可以使用流量，我一般都是使用的流量，更穩定些。
那這個時候就剩下最后一個問題了，手機端如何訪問呢，我們知道，我們訪問站點，只能通過 IP 地址，localhost 本地域名是不行的，那如何獲取現在 PC 站點的 URL 呢？請往下看。
三、獲取此時的站點 URL
上邊我們說到了連接上了手機的 USB 熱點共享后，我們就造了一個小的局域網，這個時候我們的 PC 機的 IP 地址肯定變了，具體的方法，在命令窗戶，使用 ipconfig 來查看本機 ip 地址：
（ 查找本機 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防火牆出站規則：自己電腦訪問別人電腦的規則。
很簡單，直接上動圖：
這個時候，我們就可以很輕松的解決文章開頭提出來的問題了：不在同一個局域網的台式機和手機，如何在手機上訪問站點。
五、結語
嗯，挺簡單的，下次再見了，每個加油的小伙伴，都是最靚的崽！哈哈哈