http-server 的趣玩

做 vue 项目中，很多时候看到本地打完包里的 index.html 文件，猜想这文件应该能打开，就跟在真实的服务器差不多 – 实际试后才看出直接打开会报错的！后来到网上查了相关问题，安装个 http-server 插件便能轻松打开打包后的页面。（server 插件照样能解决这问题，估计原理类似）

http-server

一、简述

http-server 是一款零配置命令行的 http 服务器。其足够强大、足够简单，不需要配置任何参数就能跑起服务器。可以用于本地开发、学习、测试。

二、安装

npm install http-server -g    // 全局安装

http-server -v 检查是否安装成功。

三、使用

在包含 index.html 的文件夹中启动 http 服务器。可以用 git bash 命令工具，同样可以用 cmd 命令工具，路径切换到文件夹位置，输入命令：

http-server

毫妙级的启动，超级快！
在 available on 下面，给出了三个访问路径。如下两种命令工具启动截图：

四、作用

http-server 主要功能就是本地能简单快速的建立起 http 服务，跑起文件夹中的页面。正因为如此，所以利于本地开发、学习、测试。

1、能够在任何文件夹中启动服务，假如不存在 index.html 文件则显示整个文件夹资源；

2、相当一个 http web服务器，能够在本地跑起不同环境打的包，快速便捷的查看打包的效果；
当 vue 项目用的是 history 路由模式时，index.html 之外的路由刷新时会报 404，简单笨拙的办法就是复制一个 index.html 页面用当前刷新的路由作文件名。（若能在 http-server 的服务里配置就智能了）

3、开发手机端页面，利用 http://192.168.xxx.xxx 路经，在同个网络的手机浏览器直接能看效果；

4、处理页面跨域；
当页面含有跨域的请求，此时可以利用http-server，使用命令
-p 本地运行端口 -P 将所有无法在本地解析的请求代理到给定的URL进行处理
http-server -p 8080 -P https://google.com

五、相关参数配置

http-server [path] [options]
path 就是你当前运行该命令下对应的某个文件夹名称 [默认当前文件夹，可省略]；
options 可选，命令的相关参数配置；
如：http-server -g -o

options主要的选项：

-p或--port: 要使用的端口（默认为8080）
        -a: 要使用的地址（默认为0.0.0.0）
        -d: 显示目录列表（默认为true）
        -i: 显示自动索引 默认true
-g或--gzip: 当启用（默认为false）时，它将./public/some-file.js.gz代替./public/some-file.js当文件的gzip压缩版本存在且请求接受gzip编码时。
-e 或--ext: 如果没有提供默认文件扩展名(默认为html)
-s 或--silent: 禁止控制台日志信息输出
    –cors: 允许跨域资源共享
       -o: 启动服务器后打开浏览器窗口
       -c: 设置缓存cache-control max-age heade存留时间（以秒为单位），示例：-c10是10秒，默认是3600秒，如果要禁用缓存就使用-c-1
-U 或者--utc: 使用 UTC格式，在控制台输出时间信息
-P 或者--proxy: 所有无法在本地解析的请求代理到给定的URL。例如：-P http://someurl.com
  -S 或--ssl: 启用https。
 -C 或--cert: ssl证书文件的路径， cert文件的路径（默认值:) cert.pem。
  -K 或--key: ssl密钥文件的路径（默认值:) key.pem。
-r 或--robots: 提供/robots.txt（其内容默认为User-agent: *\nDisallow: /）
  -h 或--help: 显示帮助

参考：http://www.manongjc.com/detail/29-gedbvlitvthildo.html
　　　https://www.npmjs.com/package/http-server