做 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