有時(shí)候，在開(kāi)發(fā)某些功能時(shí)，需要模擬服務(wù)器來(lái)展示功能時(shí)，這時(shí)候我們就需要用到本地服務(wù)器來(lái)模擬。又或者在開(kāi)發(fā)完成后，我們?cè)诎l(fā)布網(wǎng)站之前都會(huì)在本地服務(wù)器上運(yùn)行，測(cè)試一下網(wǎng)站的功能和效果的展現(xiàn),測(cè)試完成后再上傳到購(gòu)買(mǎi)的主機(jī)空間正式上線使用。

那么，有什么軟件或者什么插件之類的可以模擬本地服務(wù)器呢？接下來(lái)就介紹幾款優(yōu)秀的web本地服務(wù)器。
（以下環(huán)境基于MAC的OS X下，與Windows配置相差不大）

XAMPP / WAMPP

XAMPP 顧名思義 (Apache+MySQL+PHP+PERL)

XAMPP是利用Apache服務(wù)，能夠模擬本地服務(wù)器可以取到PHP文件從而獲取MySQL文件，就是說(shuō)可以自己新建PHP后臺(tái)文件和JSON數(shù)據(jù)文件，可以模擬一些像利用AJAX請(qǐng)求，向后臺(tái)拿到數(shù)據(jù)，完成一個(gè)完整的請(qǐng)求。

下載地址：https://www.apachefriends.org/download.html

XAMPP.png

下載完成后可以看到以下的界面，點(diǎn)擊star，在瀏覽器輸入 http://localhost/ 就能看到首頁(yè)了。

XAMPP默認(rèn)的根目錄是/Applications/XAMPP/xamppfiles/htdocs，把文件夾(yourProject)拖到htdocs，在瀏覽器輸入http://localhost/yourProject，但是這樣相當(dāng)麻煩，這就需要配置根目錄了。

配置XAMPP根目錄

在XAMPP軟件界面點(diǎn)擊Manage Servers → Configure → Open Conf File 點(diǎn)擊 YES 進(jìn)入 httpd.conf文件，
command+F 搜索 “docs”，找到 DocumentRoot 和 Directory

xampp1.png

改成自己想要的目錄就可以了。

我的文件夾為/Users/liangyongxin/desktop/mydemo

還有配置主機(jī)和站點(diǎn)這里就不多說(shuō)了。各位可以百度一下。

http-server

一款基于Node.js的命令行http服務(wù)器，利用node.js開(kāi)啟本地服務(wù)，下載前請(qǐng)先自行下載node服務(wù)。

node地址：https://github.com/nodejs/node

安裝方式：
?
npm install http-server -g

啟動(dòng)方法，直接在所在項(xiàng)目文件夾下開(kāi)啟服務(wù)：

http-server -open
hs -o  //簡(jiǎn)寫(xiě)也可以

http-server 地址：https://github.com/indexzero/http-server

browser-sync

一款可以讓你省時(shí)的瀏覽器同步測(cè)試工具，開(kāi)啟服務(wù)后，pc端、手機(jī)端同步更新，快速查看測(cè)試效果。而且是完全免費(fèi)的。

官方中文網(wǎng)：http://www.browsersync.cn/

github地址：https://github.com/BrowserSync/browser-sync

安裝方式：
?
npm install -g browser-sync

啟動(dòng)方式，直接在所在項(xiàng)目文件夾下開(kāi)啟服務(wù)：

// --files "路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄）" 
browser-sync start --server --files "dist"

// 監(jiān)聽(tīng)css文件 
browser-sync start --server --files "css/*.css"
// 監(jiān)聽(tīng)css和html文件 
browser-sync start --server --files "css/*.css, *.html"

具體監(jiān)聽(tīng)可查看官網(wǎng)
，有詳細(xì)例子解釋。一般監(jiān)聽(tīng)整個(gè)項(xiàng)目文件夾。
?

總結(jié)：

開(kāi)啟本地服務(wù)后，系統(tǒng)會(huì)自動(dòng)生成一個(gè)本地地址和一個(gè)外網(wǎng)地址

http.png

此時(shí)可以使用手機(jī)打開(kāi)外網(wǎng)地址就可查看（可能需要同一wifi下）。

一般來(lái)說(shuō)，使用以上幾個(gè)本地服務(wù)器就足夠了。
?