有时候，在开发某些功能时，需要模拟服务器来展示功能时，这时候我们就需要用到本地服务器来模拟。又或者在开发完成后，我们在发布网站之前都会在本地服务器上运行，测试一下网站的功能和效果的展现,测试完成后再上传到购买的主机空间正式上线使用。
那么，有什么软件或者什么插件之类的可以模拟本地服务器呢？接下来就介绍几款优秀的web本地服务器。
（以下环境基于MAC的OS X下，与Windows配置相差不大）
XAMPP / WAMPP
XAMPP 顾名思义 (Apache+MySQL+PHP+PERL)
XAMPP是利用Apache服务，能够模拟本地服务器可以取到PHP文件从而获取MySQL文件，就是说可以自己新建PHP后台文件和JSON数据文件，可以模拟一些像利用AJAX请求，向后台拿到数据，完成一个完整的请求。
下载地址：https://www.apachefriends.org/download.html
XAMPP.png
下载完成后可以看到以下的界面，点击star，在浏览器输入 http://localhost/ 就能看到首页了。
XAMPP默认的根目录是/Applications/XAMPP/xamppfiles/htdocs，把文件夹(yourProject)拖到htdocs，在浏览器输入http://localhost/yourProject，但是这样相当麻烦，这就需要配置根目录了。
配置XAMPP根目录
在XAMPP软件界面点击Manage Servers → Configure → Open Conf File 点击 YES 进入 httpd.conf文件，
command+F 搜索 “docs”，找到 DocumentRoot 和 Directory
xampp1.png
改成自己想要的目录就可以了。
我的文件夹为/Users/liangyongxin/desktop/mydemo
还有配置主机和站点这里就不多说了。各位可以百度一下。
http-server
一款基于Node.js的命令行http服务器，利用node.js开启本地服务，下载前请先自行下载node服务。
node地址：https://github.com/nodejs/node
安装方式：
npm install http-server -g
启动方法，直接在所在项目文件夹下开启服务：
http-server -open
hs -o //简写也可以
http-server 地址：https://github.com/indexzero/http-server
browser-sync
一款可以让你省时的浏览器同步测试工具，开启服务后，pc端、手机端同步更新，快速查看测试效果。而且是完全免费的。
官方中文网：http://www.browsersync.cn/
github地址：https://github.com/BrowserSync/browser-sync
安装方式：
npm install -g browser-sync
启动方式，直接在所在项目文件夹下开启服务：
// --files "路径是相对于运行该命令的项目（目录）"
browser-sync start --server --files "dist"
// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"
具体监听可查看官网
，有详细例子解释。一般监听整个项目文件夹。
总结：
开启本地服务后，系统会自动生成一个本地地址和一个外网地址
http.png
此时可以使用手机打开外网地址就可查看（可能需要同一wifi下）。
一般来说，使用以上几个本地服务器就足够了。
网友评论