安装
sudo npm install http-server -g
运行
1. 直接去到要跑起来的目录，在终端输入
- cd xxxx文件夹
- http-server //只输入http-server的话，更新了代码后，页面不会同步更新
- http-server -c-1 //同步更新页面
- http-server -a 127.0.0.1 -p 8080 -c-1 //同步更新页面并且设置了ip和端口号
- // 按快捷键CTRL-C 关闭http-server服务
2. 浏览器直接输入提示地址
https://i-blog.csdnimg.cn/direct/c2d1e2005871445c89770aecd5c06df2.png" width="662" />
常用配置参数
- -p 端口号 (默认 8080)
- -a IP 地址 (默认 0.0.0.0)
- -d 显示目录列表 (默认 'True')
- -i 显示 autoIndex (默认 'True')
- -e or --ext 如果没有提供默认的文件扩展名(默认 'html')
- -s or --silent 禁止日志信息输出
- --cors 启用 CORS via the Access-Control-Allow-Origin header
- -o 在开始服务后打开浏览器
- -c 为 设置缓存控制max-age头的缓存时间(秒) , 如-c10即 10s (默认 为 '3600'). 禁用缓存, 则使用 -c-1.
- -U 或 --utc 使用UTC time 格式化log消息
- -P or --proxy 代理无法在本地解决给定网址对所有请求 如: -P http://someurl.com
- -S or --ssl 启用 https
- -C or --cert ssl证书文件路径 (默认值: cert.pem)
- -K or --key ssl密钥文件路径 (默认值: key.pem).
- -r or --robots 提供一个 /robots.txt (其内容默认为'User-agent: *\nDisallow: /')
- -h or --help 打印此列表并退出
charles代理本地，需重启
项目设置
代理本地资源，需要本地资源可在局域网内访问
修改项目中webpack-dev-server的host配置为:0.0.0.0,这样设置后，就支持localhost和IP两种访问方式(其他非webpack-dev-server启动服务的资源文件可以使用nginx或单独创建一个服务的形式处理)
https://i-blog.csdnimg.cn/direct/7134ca2056904093a86e04714ad601f1.png" width="1272" />
启动项目后，访问地址就是IP:8080方式访问，在同局域网内的也可以访问
https://i-blog.csdnimg.cn/direct/5e40d51c8c734f10a9a759ed04fd88da.png" width="1100" />
配置Charles
打开Charles，设置系统代理
https://i-blog.csdnimg.cn/direct/c67be525949f455c9de62d1ea2aae3dc.png" width="290" />
设置需要代理的文件或者文件路径
Tools -> Map Remote -> 勾选 Enable Map Remote -> 点击add。
由于打包的加载方式和开发的加载方式不同，设置应该遵循开发的方式。
如：线上模式有app和manifest两个资源文件，子页面是manifest的版本命名来加载的，而在开发模式下只有app，子页面直接从app中的路由命名到内存中加载文件，所以，我们只需要设置app的代理，然后将app里加载的文件代理一个文件夹即可
https://i-blog.csdnimg.cn/direct/ab6d3930e8e94d7490d4951ac0e29eca.png" width="278" />
https://i-blog.csdnimg.cn/direct/243b3ed557e444118da5bd8a72612226.png" width="1080" />
https://i-blog.csdnimg.cn/direct/f4150dd67fc54196810c406aa59421aa.png" width="880" />
https://i-blog.csdnimg.cn/direct/7f5b71afa16148b095bb8d74021734a4.png" width="1500" />
设置成功后，重启Charles
访问线上的代理域名查看Charles：
https://i-blog.csdnimg.cn/direct/725ae60f8730489585a3ba475ed0def9.png" width="1500" />
