线上地址:
https://github.com/avwo/whistle
亮点:
- 可以直接通过浏览器抓包,获取请求
- 操作很简单,可以快速集成到本地项目
- 不用再配置本地项目反向代理,直接将线上地址配置到本地开发
- .... 可以看官网了解更多
在项目中配置:
1. 下载whistle(在当前项目的目录终端)
npm i -g whistle
2. 启动(会有一个证书认证,点击yes)
w2 start --init
3. 打开之后,新建规则
输入规则名
4.配置项 线上地址 线下地址
xianshang/dizhi localhost:8888
5.将本地的代理取消,也就是vue.config.js里面的proxy不要(在配置的情况下)
6. 解决无法热更新问题
devServer: {
disableHostCheck: true // 添加此配置项即可解决无法热更新}
7. 跨域问题
将线上地址忽略掉即可
线上基地址/api ignore://* // 这句代码写在规则配置里面
8. 图片加载不出来问题
// 可以用正则匹配到所有的图片,然后用 ignore://* 忽略即可
9. 集成到项目中
// 在根目录新建一个 .whistle.js文件
exports.name = '规则名'
exports.rules = ` 将线上配置的规则复制到此处 `
// 建好之后,在终端输入 w2 add 如果成功会在whistle页面显示弹框,点击yes,然后将这个规则钩上
// 做完这几步,whistle就已经配置好了
10. 重新书写readme.md
