在開發中,很多時候需要在本地開啟靜態資源伺服器來測試,所以就需要一個簡單省事好用的http伺服器。以前的時候,都是使用php的本地環境,也算比較方便,但是自從學了nodejs,發現建立http-server更方便。
本文的目的
在這篇文章中,我將向您展示如何使用NodeJS建立一個非常簡單的HTTP伺服器。您可以通過http訪問目錄中的靜態資源,如HTML,Javascript,CSS等,比如:
而不是通過預設的file:///來訪問
那問題是為什麼只有需要一個HTTP才能訪問靜態資源呢?
是因為HTML檔案含有Javascript檔案時,如果通過預設的file://地址來訪問此檔案的話,瀏覽器會阻止本地Javascript檔案的一些操作,此時就需要安裝HTTP-Server來解決這個問題。
報錯資訊:
- Failed to load file:///E:/webexamples/reactjs/hello-reactjs/person.jsx:
- Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
建立HTTP-Server
首先,確保已在計算機上安裝NodeJS和npm; 否則,請按照以下說明進行安裝:
- 在Windows上安裝NodeJS
- 開啟 Git Bash或其他命令列工具,依次輸入以下命令,按回車:
npm config set registry https://registry.npm.taobao.org/
npm config set loglevel http
npm config set progress false
複製程式碼
- npm 的配置被儲存在 ~/.npmrc,你可以隨時改。
①接下來第一步,先建立一個空目錄:
②利用命令列工具進入這個目錄,這裡用的是Git Bash。右擊滑鼠,點選Git Bash here,即可用Git Bash開啟這個目錄:
③執行以下命令安裝http-server:
$ npm install -g http-server
複製程式碼
④啟動HTTP-Server,輸入命令:
$ http-server -c-1
複製程式碼
到此您的HTTP伺服器就已經啟動了,它正在埠8080上監聽,您可以通過訪問以下連結進行檢查,3個地址在電腦端開啟的是同一份東西:
- http://192.168.1.116:8080/ (只有這個地址能在手機中預覽)
- 127.0.0.1:8080/ (2和3性質是一樣的)
- localhost:8080/ (較為常用)
⑤在該目錄中建立一個HTML檔案,您可以通過此HTTP地址訪問它:
⑥這裡Windows 使用者需要注意了,如果你發現你修改了原始碼,頁面卻無法更新,說明http-server 的快取還未消除,那麼可以這樣做:
- 開啟 Chrome 開發者工具
- 點選 Network
- 勾選 Disable Cache
這樣快取就不存在了~
其他命令安裝HTTP-Server
這裡就不仔細介紹步驟了,因為大部分操作和結果與第2步是一樣的,直接上命令:
第一種方法:
安裝:
$ npm i startserver -g
複製程式碼
快速開啟:
$ startserver
複製程式碼
第二種方法:
安裝:
$ npm install -g live-server
複製程式碼
快速開啟:
$ live-server
複製程式碼
如果看到其他有意思的方法,後續還會增加的!
以上就是我在近期收集到的一些方法資料,不一定全面,如有錯誤歡迎指正哦。
本人Github連結如下,歡迎各位Star