要實現手機訪問本地開發的移動端項目,首先做到兩點:
1、本地打開的項目可以使用本地ip訪問
2、手機和電腦同時處於一個同一個局域網中(手機和電腦同時連上同一個wifi / 手機開熱點給電腦 / 電腦開wifi給手機連接)
如果做到以上兩點,那么恭喜你,就可以直接使用電腦ip在移動端訪問了。
因為現開發項目是angular + ionic項目,所以以下設置及開發均以angular項目為基礎進行設置。下面先來解決第一個難題:
一、angular項目配置可同時使用localhost和本地ip訪問,步驟如下:
step1: 找到此文件“node_modules/webpack-dev-server/lib/Server.js”,按照下圖修改
將return false 修改為return true;
step2: 修改配置文件package.json
step2: 重啟項目
到此為止就可以直接使用本機IP:4200或者localhost:4200訪問項目啦。
現在第一個問題問題解決了,那么接下來看看如何通過移動端訪問本地angualr項目。上面已經說了,需手機和電腦在同一個局域網內,介紹了三種方法,現僅以電腦開wifi給手機連接為例進行講解,其他兩種方式設置類似。
二、手機連接電腦測試本地開發的移動端頁面
step1:關閉電腦防火牆
或者80端口允許連接;
設置方法:
打開控制面板—Windows防火牆—高級設置—入站規則—新建規則—端口—輸入80
step2: 開啟電腦熱點
在電腦右下角網絡設置區域,右鍵 =》打開 “網絡和Internet” 設置,打開如下頁面:
開啟之后,就可以字已連接設備地方區域看到連接的移動端手機
step3: 檢查電腦是否可以連通手機
命令提示符 cmd -》(下圖是連通的)
ping 分配的IP
step4: 如何獲取電腦ip
命令提示符 cmd -》ipconfig
1.如果電腦是使用 有線網 連接到 因特網。
手機端應該輸入的IP地址是 以太網網卡的IP(選擇其中一個接口,另一個是備用的)
2.如果電腦使用 無線網 連接到因特網
手機端應該輸入IP地址是 無線網卡的IP(選擇其中一個IPV4即可)。
至此,可以使用手機進行訪問了
完美完成手機端訪問電腦本地開發的移動項目。