最近需要在本機(jī)調(diào)試原生與H5的交互斯辰,需要將html放在服務(wù)器上以供app可以通過鏈接訪問舶担。當(dāng)然,直接把html放在本地也是沒毛病的彬呻,不過這次我們的重點(diǎn)是:通過自建服務(wù)器加載H5衣陶。
1. 安裝node、npm
1.1進(jìn)入 nodejs官網(wǎng)下載頁
1.2下載并安裝macOS Installer (.pkg)
1.3檢查node闸氮、npm是否安裝完成
在終端輸入
$:node -v
v10.14.2
$: npm -v
6.4.1
如果安裝成功剪况,則會順利輸出版本號
1.3更改npm 源,如果不更改源蒲跨,會導(dǎo)致某些資源下載失敗
$:npm config set registry http://registry.npm.taobao.org/
2. 安裝http-server
$:npm install http-server -g
-g 表示安裝在全局译断,不只是當(dāng)前用戶能用。
如果報(bào)找不到文件的錯(cuò)誤或悲,請用管理員權(quán)限運(yùn)行
$:sudo npm install http-server -g
3. 加載H5文件
3.1 在桌面創(chuàng)建一個(gè)測試文件夾Test
3.2 將H5文件放入Test文件夾
3.3 cd進(jìn)入Test 文件并執(zhí)行
$:http-server .
如果顯示結(jié)果如下孙咪,則表示本地服務(wù)器已成功啟動
$ http-server .
Starting up http-server, serving .
Available on:
http://127.0.0.1:8080
http://192.168.1.229:8080
http://192.168.2.1:8080
Hit CTRL-C to stop the server
3.4 打開瀏覽器,輸入localhost:8080
dist是我這里的H5文件夾巡语,小伙伴這里應(yīng)該顯示的是你的H5文件夾
在頁面點(diǎn)擊此文件夾翎蹈,則可以打開H5頁面
4 在手機(jī)端加載此H5
查看終端,在上面執(zhí)行完 http-server .后(.是代表在當(dāng)前目錄下)會顯示本地地址如下:
Starting up http-server, serving .
Available on:
http://127.0.0.1:8080
http://192.168.1.229:8080
http://192.168.2.1:8080
Hit CTRL-C to stop the server
第一行代表本機(jī)地址男公,可以在電腦上直接訪問
第二行代表在局域網(wǎng)里的地址荤堪,如果手機(jī)與電腦同屬一個(gè)局域網(wǎng),那么可以通過這個(gè)地址加載H5
第三行代表電腦的wifi地址,如果手機(jī)連接的是電腦的熱點(diǎn)澄阳,那么可以通過這個(gè)地址加載H5.
5 關(guān)閉server
5.1選擇終端窗口
5.2 鍵盤輸入Control+ C
^Chttp-server stopped.
Ok拥知,so much for this class.goodbye everyone.
參考博文 : Mac下安裝npm,http-server碎赢,安裝虛擬服務(wù)器