本地網(wǎng)站(上海本地網(wǎng)站)

現(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