前端开发中，经常遇到有些场景需要用到服务器环境，例如AngularJS中的路由，或者是模拟ajax获取数据等需求时，这个时候并不需要考虑到服务端逻辑，只是搭建简单的静态资源服务，因此解决方法有很多，下面介绍几种简单快捷的常用方式：
一：使用http-server
http-server基于Node，所以得先确保有Node环境。
一：使用http-server
http-server基于Node，所以得先确保有Node环境。
1. 安装http-server
|
2. 启动
|
上面的命令表示在本机的9999端口上启动一个静态服务器，应用根目录为执行上面命令的所在目录
优点：简单，快速
缺点：命令行一关，服务就中止了。每次开机都要再启一次，麻烦
二：使用ApmServer/XAMPP
两者都是PHP的集成环境，这里以ApmServer为例（只有用过ApmServer）。
首先在网上下载ApmServer的压缩包（免安装），解压到一个盘的根目录（建议是根目录，因为路径有空格可能造成一些不必要的麻烦），下面是其解压后的目录结构：
双击APMServ.exe启动应用，可以看到下面的界面：
打开虚拟目录的配置界面，填写虚拟目录名称（英文），中文备注，选择网页根目录，然后保存虚拟目录，重启ApmServer后,就可以访问我们的虚拟目录了。
优点：简单，快速，集成PHP开发环境（PHP，MySQL等）,支持虚拟目录等许多实用功能
缺点：用着用着就启动不了
三：使用Tomcat
Tomcat是Java应用服务器，当然也可以用来作静态服务器。但Tomcat默认的一些配置不太友好，所以我们要定制一些配置。首先就是让Tomcat支持显示目录文件。打开Tomcat/conf/web.xml，修改listings为true。
Tomcat中虚拟目录配置是位于Tomcat/conf/server.xml。在在host标签中增加如下格式的配置：
|
如：<Context path=”/test” docBase=”G:/Test” crossContext=”true” />
完成上面配置后，双击Tomcat/bin/startup.bat即可以启动Tomcate服务器，在浏览器中就可以正常访问到刚我们配好的目录了。
优点：功能强大
缺点：配置复杂
四：使用static-server
static-server很类似http-server，也是基于node，安装和使用方法很相似：
npm install -g static-server使用时只需要在项目目录下指定该项目的入口文件即可：
static-server -i index.html
下面是一些常用的选项：
-p, --port
详见：https://www.npmjs.com/package/static-server
五：使用Python
如果你安装了Python，那这个方法可能最简便了，只需要在该目录下执行命令:
python -m SimpleHTTPServer这样就启动了一个静态web服务器，此时项目的根目录为执行命令时所在目录，默认端口是8000，如果需要指定端口，则加上端口号启动：
python -m SimpleHTTPServer 8080
使用Ruby
如果你安装Ruby，Ruby也提供了一个很简便的方式：
ruby -run -e httpd . -p 8888
使用Nginx
Linux上时都会用到Nginx做反向代理服务器，所以很有必要会用Nginx。
下载，解压，运行nginx.exe，在浏览器输入localhost或127.0.0.1，如果出现
Welcome to nginx!
则说明Nginx已经成功安装。Nginx常用到的命令：
nginx -s reload // 重新加载nginx配置
nginx -s stop如果你的需求只是实现静态资源服务，那么只需要如下简单配置即可：root代表项目的根目录，index代表默认的入口文件。
server {
listen 80;
server_name localhost;
location / {
root E:\Work\Workspace;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}这时候访问 http://localhost/index.html 就OK了。
使用json-server
ajax从后台获取数据，因为通常一个项目中前端开发和后台几乎是同时进行的，开发初期往往需要前端自己构造假数据来渲染页面，谷歌浏览器不在服务端环境下调试js，则会被视为跨域，从而导致无法获取本地json数据，要不就使用火狐浏览器，较好的解决方法是快速搭建一个JSON服务器,这个时候json-server就是个不错的选择了。
安装：
npm install -g json-serverjson文件：如data.json:
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 },
{ "id": 2, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
json-server来监听这个文件:
json-server --watch data.json
# 或者指定端口启动启动
json-server --watch data.json --port 3004
json-server默认创建了三个请求资源，分别对应了data.json中的key值，很方便，这个时候浏览器访问localhostL3000/db 就会看到当前data.json的数据了。
访问http://localhost:3000/comments/1 ，则可以获取到comments下id为1的json数据：
json-server也作为静态资源的服务器，这样就没有跨域问题了。
json-server默认的静态资源（HTML,CSS,JS等）是在与json数据文件同级目录下的public文件夹中，你只需要创建一个名为public的文件夹，把静态资源放到public目录下，然后直接运行以下命令启动即可：
json-server data.jsonjson-server即可，如指定静态资源为json数据同级目录的source文件夹下，则：
json-server data.json --static ./source这样，访问http://localhost:3000/index.html 就可以成功加载到json数据了。
json-server还有很多更强大的功能，如支持模拟REST API操作等，更多的功能可以到json-server项目文档查看。
使用一些IDE
例如：HBuilder、WebStorm
小结：
如果没有特别要求，使用http-server基本就能满足我们前端对服务器的要求了
