如何快速搭建靜態資源服務器

在開發中，不少時候須要在本地開啓靜態資源服務器來測試，因此就須要一個簡單省事好用的http服務器。之前的時候，都是使用php的本地環境，也算比較方便，可是自從學了nodejs，發現建立http-server更方便。

本文的目的

在這篇文章中，我將向您展現如何使用NodeJS建立一個很是簡單的HTTP服務器。您能夠經過http訪問目錄中的靜態資源，如HTML，Javascript，CSS等，好比：

• http://localhost:8080/hello.html
• http://localhost:8080/abc.js

而不是經過默認的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 的緩存還未消除，那麼能夠這樣作：

1. 打開 Chrome 開發者工具
2. 點擊 Network
3. 勾選 Disable Cache

這樣緩存就不存在了~

其餘命令安裝HTTP-Server

這裏就不仔細介紹步驟了，由於大部分操做和結果與第2步是同樣的，直接上命令：

第一種方法：
安裝：

$ npm i startserver -g
複製代碼

快速開啓：

$ startserver
複製代碼

第二種方法：
安裝：

$ npm install -g live-server
複製代碼

快速開啓：

$ live-server
複製代碼

若是看到其餘有意思的方法，後續還會增長的！

以上就是我在近期收集到的一些方法資料，不必定全面，若有錯誤歡迎指正哦。

本人Github連接以下，歡迎各位Star

github.com/miqilin21/m…