vue项目在本地测试微信公众号JS SDK

假设，本地有个vue项目，启动地址为http://192.168.1.168:7006;这个项目有个模块用到了微信扫一扫的功能；此项目线上请求的后端API地址是 https://api.weixin.com;公众号的JS SDK提供的API，直接在本地调用是无法成功的，因为公众号后台会去验证请求API的地址是不是合法的，也就是说，只有配置在公众号JS安全域名里面的地址，才能成功调用微信公众号JS SDK；我们不可能直接在线上正式的环境下去单独测试微信公众号JS SDK提供的API，所以如果我们没有线上测试服务器，该如何在本地环境去测试微信公众号JS SDK提供的API呢？首先，我们需要有个域名（这里假设是http://www.weixin.com），而且这个域名已经加入到了微信公众号JS接口安全域名（登录微信公众平台后，在设置——公众号设置——功能设置里配置JS接口安全域名）下了，接下来需要有3个步骤：
第一步，vue.config.js配置反向代理(假设，所有与微信公众号相关的后端API接口，都是以“weixin”开头)：

devServer: {
    host: "0.0.0.0",
    disableHostCheck: true,
    port: 7006,
    // 自动启动浏览器
    open: true,
    proxy: {
    	'/weixin': {
			target: 'https://api.weixin.com',
			changeOrigin: true,
			ws: false
		}
	}
}

第二步，Fiddler设置；
打开fiddler软件，依次点击Tools——HOSTS;

将"Enable remapping of requests for one host to a different host or IP,overriding DNS."打上勾；输入本地vue项目启动地址，空格，在输入项目线上的地址；如下图所示：

有一点需要注意的是，在向后端请求接口获取微信公众号签名时，注意传递给后台的参数URL，最好使用window.location.href.split(’#’)[0]获取（我这个项目的路由使用的hash模式），最终获取的URL路径是要以“/”结尾的；

最后一步，需要确保手机与电脑在同一个wifi下，设置手机的WIFI网络手动代理到电脑IP的8888端口（此端口是fiddler用于监听手机请求的）；如果对于fiddler代理手机请求不太清楚的童鞋，可以参看此链接：Fiddler 监听手机请求地址详细教程
如果不出意外的话，此时你在手机微信里打开http://www.weixin.com，就会打开电脑上本地的vue项目，微信扫一扫的API也能成功调用了。瞬间觉得，节省了一台线上测试服务器的成本，满满的成就感！！！哈哈哈~~~