現(xiàn)在的框架提供非常好的工具鏈,周到全面。
以react為例子,當(dāng)你用create-react-app 創(chuàng)建一個(gè)react項(xiàng)目,啟動(dòng)后,會(huì)有如下提示:
本機(jī)可以通過(guò)http://localhost:3000訪(fǎng)問(wèn),還提示你,局域網(wǎng)內(nèi)可以通過(guò)http://192.168.1.8:3000訪(fǎng)問(wèn)。
Nice.gif!
那如果簡(jiǎn)單的靜態(tài)頁(yè)面如何使用手機(jī)查看及調(diào)試呢?操作也很簡(jiǎn)單,可以在vscode上安裝一個(gè) live rver 的擴(kuò)展。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Live Server 可以為靜態(tài)和動(dòng)態(tài)頁(yè)面,啟動(dòng)一個(gè)本地開(kāi)發(fā)服務(wù)器,這個(gè)服務(wù)還可以實(shí)時(shí)重載。
安裝這個(gè)擴(kuò)展之后,用vscode打開(kāi)靜態(tài)html項(xiàng)目包,打到項(xiàng)目入口頁(yè)面如index.html。右鍵,點(diǎn)擊Open with Liver Server,即可啟動(dòng)一個(gè)服務(wù),用以訪(fǎng)問(wèn)該網(wǎng)站。
默認(rèn)的訪(fǎng)問(wèn)地址為:http://127.0.0.1:5500/index.html。
此時(shí),手機(jī)還無(wú)法訪(fǎng)問(wèn)。想要手機(jī)能訪(fǎng)問(wèn),也非常簡(jiǎn)單,只要把你電腦的在局域網(wǎng)中的地址把 127.0.0.1替換掉就行。
你可以通過(guò) cmd 輸入ipconfig /all,查看本機(jī)地址。
當(dāng)然,直接的方式是讓Live Server直接生成以本機(jī)局域網(wǎng)地址的服務(wù)。其步驟為:
1 打開(kāi)vscode 首選項(xiàng)–>設(shè)置,搜索 Live Server,點(diǎn)擊編輯 Live Server 的 tting.json。
2 在tting.json中添加兩個(gè)配置項(xiàng):
“l(fā)iveServer.ttings.uLocalIp”:true,
“l(fā)iveServer.ttings.host”: “l(fā)ocalhost”
參考資料
rver – Why can’t I enter the url on my phone’s browr to view my live site? – Stack Overflow
本文發(fā)布于:2023-02-28 20:03:00,感謝您對(duì)本站的認(rèn)可!
本文鏈接:http://www.newhan.cn/zhishi/a/167765201277484.html
版權(quán)聲明:本站內(nèi)容均來(lái)自互聯(lián)網(wǎng),僅供演示用,請(qǐng)勿用于商業(yè)和其他非法用途。如果侵犯了您的權(quán)益請(qǐng)與我們聯(lián)系,我們將在24小時(shí)內(nèi)刪除。
本文word下載地址:本地網(wǎng)站(上海本地網(wǎng)站).doc
本文 PDF 下載地址:本地網(wǎng)站(上海本地網(wǎng)站).pdf
| 留言與評(píng)論(共有 0 條評(píng)論) |