如何在手機上訪問電腦web項目進行真機調試

有時候想在自己手機上預覽一下開發中網頁的效果，就需要使用真機調試，用chrome自帶的調試功能是很好的方法，但有時候需要適配一些小眾的手機屏幕，這時用chrome就不方便了，下面說一下如何在手機上進行網頁預覽。

1.手機和電腦連同一個WiFi

注意，這里的WiFi不是指手機連上電腦的熱點，而是兩者連進別的局域網，比如公司或者家里的WIFI。

2.打開電腦命令行查看ip地址

1. win+r，輸入cmd，再輸入ipconfig，找到“無線局域網適配器 WLAN”一欄，記下ipv4地址。（注意一定是“無線局域網適配器 WLAN”一欄）。
2. 電腦上啟動web項目。
3. 關閉電腦防火牆。
4. 手機瀏覽器輸入http:// +ipv4 +端口號

嗯，如果根據上面的步驟你成功訪問到項目的話，那確實很幸運，上面是網上流行的做法，但博主一直都是不幸的人，下面說說博主遇到的坑和解決的方法。

1.端口號被占用

一般web項目是在8080端口啟用，但有時候如果8080被占用了，就會轉到別的端口，如果你想就用8080端口，那就需要先把8080端口的服務先暫停掉。

1. 命令行輸入netstat -aon|findstr "8080"。
2. 記下最右側的PID（一個數值），比如是3344。
3. taskkill ／pid：3344。
4. 重新啟動web項目。

2.關閉防火牆不起作用

emmm，老實說，博主不大懂防火牆的相關原理，如果你遇到這個可以這樣設置一下，希望能起作用。

1. 打開windows安全中心。（窮人買不起mac）點擊公用網絡再下面一點的高級設置。
2. 在彈出界面點擊操作，選擇新建入站規則。選擇“端口”，下一步，選擇“TCP”，“特定本地端口”，輸入8080，下一步，選擇“允許鏈接”，下一步，默認的三個都選，下一步，名稱和描述隨意，點擊完成。

emmm，如果這時候還是不能訪問，那也許就不是防火牆的鍋了。

3.不知道神馬錯誤

如果你走到這一步，那恭喜你已經成為和博主一樣不幸的人。但神依然給你留了希望，可以試試最后一個方法。如果你使用vue-cli腳手架，可以這么處理（其他同理）

打開根目錄下的config文件夾，打開index.js，

找到dev的host，將localhost改為'0.0.0.0'，然后重啟項目。

這時你在電腦點擊命令行的地址無法訪問到項目，在瀏覽器地址欄把0.0.0.0改為localhost就可以了，但我們終極目標是手機預覽，這時只需要在手機上的瀏覽器地址欄輸入

http:// + ipv4 + 端口號 就可以訪問了。

 

 

 

結語：如果走到這，還是不行，那請回頭看看哪一步沒做對，可能是你ipv4輸錯了，也可能端口你找錯了，如果都不是，那你就很有幸成為比博主更不幸的人了，所以還是放棄吧。

（ps：一定要關閉電腦防火牆，全關裸奔那種，關閉一切電腦殺毒軟件，當然裸奔完記得把衣服穿上避免着涼，把防火牆都還原為打開狀態。）