手機上訪問angular移動項目


要實現手機訪問本地開發的移動端項目,首先做到兩點:

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即可)。

 

 至此,可以使用手機進行訪問了

 

 完美完成手機端訪問電腦本地開發的移動項目。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM