轻量级服务器http-server

安装

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服务
  1. 浏览器直接输入提示地址

常用配置参数

  • -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或单独创建一个服务的形式处理)

启动项目后,访问地址就是IP:8080方式访问,在同局域网内的也可以访问

配置Charles

打开Charles,设置系统代理

设置需要代理的文件或者文件路径

Tools -> Map Remote -> 勾选 Enable Map Remote -> 点击add。

由于打包的加载方式和开发的加载方式不同,设置应该遵循开发的方式。

如:线上模式有app和manifest两个资源文件,子页面是manifest的版本命名来加载的,而在开发模式下只有app,子页面直接从app中的路由命名到内存中加载文件,所以,我们只需要设置app的代理,然后将app里加载的文件代理一个文件夹即可

设置成功后,重启Charles

访问线上的代理域名查看Charles:

相关推荐
dustcell.4 分钟前
nginx的https搭建
运维·nginx·https
一字白首4 分钟前
Node.js 入门搞定核心内置模块(fs/path/http/querystring)
学习·http·node.js
last demo5 分钟前
VSFTPD 服务器
linux·运维·服务器
Azure DevOps6 分钟前
Azure DevOps Server:允许讨论但不允许修改工作项
运维·microsoft·azure·devops
w***4246 分钟前
报错The default superclass, “jakarta.servlet.http.HttpServlet“(已经配置好tomcat)
http·servlet·tomcat
阿阿越7 分钟前
Linux系统编程 -- 进程(二)
linux·运维·服务器
Jerry.张蒙7 分钟前
SAP实现物料分类与订单类型匹配检查
运维·人机交互·能源·运维开发·创业创新·制造·学习方法
双木的木10 分钟前
Coggle数据科学 | 并行智能体:洞察复杂系统的 14 种并发设计模式
运维·人工智能·python·设计模式·chatgpt·自动化·音视频
waves浪游17 分钟前
进程控制(上)
linux·运维·服务器·开发语言·c++
Mr.Ja17 分钟前
【Docker 从入门到实战】——解决跨环境部署痛点的完整指南
运维·docker·容器·dockerfile·dockerimage