mac下使用Charles将线上项目的js代理到本地

1.下载Charles

去 Charles 的官方网站（http://www.charlesproxy.com）下载最新版的 Charles 安装包

安装成功后注册破解:

Registered Name: *zhile.io *

License Key: 48891cf209c6d32bf4

2.项目设置

代理本地资源，需要本地资源可在局域网内访问

修改项目中webpack-dev-server的host配置为:0.0.0.0,这样设置后，就支持localhost和IP两种访问方式(其他非webpack-dev-server启动服务的资源文件可以使用nginx或单独创建一个服务的形式处理)

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

3.配置Charles

打开Charles，设置系统代理

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

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

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

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


设置成功后，重启Charles

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

代理就完成了。

参考：

如何将前端线上静态资源代理到本地（Charles）

webpack-dev-server --host 0.0.0.0 问题