安裝

sudo npm install http-server -g

運(yùn)行

1. 直接去到要跑起來的目錄，在終端輸入

• cd xxxx文件夾
• http-server //只輸入http-server的話，更新了代碼后，頁(yè)面不會(huì)同步更新
• http-server -c-1 //同步更新頁(yè)面
• http-server -a 127.0.0.1 -p 8080 -c-1 //同步更新頁(yè)面并且設(shè)置了ip和端口號(hào)
• // 按快捷鍵CTRL-C 關(guān)閉http-server服務(wù)

2. 瀏覽器直接輸入提示地址

常用配置參數(shù)

• -p 端口號(hào) (默認(rèn) 8080)
• -a IP 地址 (默認(rèn) 0.0.0.0)
• -d 顯示目錄列表 (默認(rèn) 'True')
• -i 顯示 autoIndex (默認(rèn) 'True')
• -e or --ext 如果沒有提供默認(rèn)的文件擴(kuò)展名(默認(rèn) 'html')
• -s or --silent 禁止日志信息輸出
• --cors 啟用 CORS via the Access-Control-Allow-Origin header
• -o 在開始服務(wù)后打開瀏覽器
• -c 為 設(shè)置緩存控制max-age頭的緩存時(shí)間(秒) , 如-c10即 10s (默認(rèn) 為 '3600'). 禁用緩存, 則使用 -c-1.
• -U 或 --utc 使用UTC time 格式化log消息
• -P or --proxy 代理無法在本地解決給定網(wǎng)址對(duì)所有請(qǐng)求 如: -P http://someurl.com
• -S or --ssl 啟用 https
• -C or --cert ssl證書文件路徑 (默認(rèn)值: cert.pem)
• -K or --key ssl密鑰文件路徑 (默認(rèn)值: key.pem).
• -r or --robots 提供一個(gè) /robots.txt (其內(nèi)容默認(rèn)為'User-agent: *\nDisallow: /')
• -h or --help 打印此列表并退出

charles代理本地，需重啟

項(xiàng)目設(shè)置

代理本地資源，需要本地資源可在局域網(wǎng)內(nèi)訪問

修改項(xiàng)目中webpack-dev-server的host配置為:0.0.0.0,這樣設(shè)置后，就支持localhost和IP兩種訪問方式(其他非webpack-dev-server啟動(dòng)服務(wù)的資源文件可以使用nginx或單獨(dú)創(chuàng)建一個(gè)服務(wù)的形式處理)

啟動(dòng)項(xiàng)目后，訪問地址就是IP:8080方式訪問，在同局域網(wǎng)內(nèi)的也可以訪問

配置Charles

打開Charles，設(shè)置系統(tǒng)代理

設(shè)置需要代理的文件或者文件路徑

Tools -> Map Remote -> 勾選 Enable Map Remote -> 點(diǎn)擊add。

由于打包的加載方式和開發(fā)的加載方式不同，設(shè)置應(yīng)該遵循開發(fā)的方式。

如：線上模式有app和manifest兩個(gè)資源文件，子頁(yè)面是manifest的版本命名來加載的，而在開發(fā)模式下只有app，子頁(yè)面直接從app中的路由命名到內(nèi)存中加載文件，所以，我們只需要設(shè)置app的代理，然后將app里加載的文件代理一個(gè)文件夾即可

設(shè)置成功后，重啟Charles

訪問線上的代理域名查看Charles：

到此這篇關(guān)于輕量級(jí)服務(wù)器http-server的文章就介紹到這了,更多相關(guān)服務(wù)器http-server內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論