微信公众号网页开发的真机调试一直是很头疼的事情。
原因一微信公众号配置的JS安全域名只有三个，一个大中型的公众号这三个JS安全域名都是生产的域名，不可能预留域名用于开发和调试。
原因二在微信里面只有访问正确的安全域名才能调用wx.config用来调用微信的接口。调试器和真机有差异。
原因三在实际的开发中我们不可能写一部分代码上传到生产的服务器上再用真机调试，这样是非常麻烦的事情。
解决方案通过微信里面的链接访问本地的前端服务进行真机调试。
step1假如我们用vue-cli3.0作为开发框架，我们需要把端口号改成80端口，则需要配置vue.config.js里面的devServer。
devServer: { port: 80, // 前端服务端口 disableHostCheck: true, proxy: { // 转发配置 '/evcard-ams/api': { target: 'http://csms-st.vip:180', // 测试或者开发服务器 ws: true, changeOrigin: true, pathRewrite: { '^/evcard-ams/api': '/evcard-ams/api', }, }, }, },复制代码我们在安装好依赖包后，npm run dev的时候终端会显示出本地ID。在终端运行IPconfig也可以获取到。
图片中 10.2.11.150 是本地IP地址。
step2
改变 hosts 文件
hosts的文件目录 C:WindowsSystem32driversetc
这样本地可以 访问 csms.xxx.vip/you-app-name 就可以访问前端项目了。
step3安装 Fiddler
如图进行设置 将端口号设置成8888
step4
手机和电脑必须在同一个局域网下面，手动更改手机代理。
10.2.11.150 是电脑的本地IP地址， 8888 是Fiddler的端口地址。
step5
现在 手机微信里面 访问 csms.xxx.vip/you-app-nam… 就会访问电脑上的前端服务，并且是热重载。通过更改前端服务器的转发地址就可以变化访问后端服务器。 这样就很方便调试了。