前言

微信公众号网页开发的真机调试一直是很头疼的事情。

原因一

微信公众号配置的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',
        },
      },
    },
  },