從壹開始 [ 學調試 ]║ 輕鬆實現 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、結語

嗯，挺簡單的，下次再見了，每一個加油的小夥伴，都是最靚的崽！哈哈哈