前端开发微信公众号本地调试

前言

场景：先描述一下我整个编写的心里路程，非常的尴尬，一定要先看下再进行编写，整个过程是这样的，公司网络是做了网络安全限制的，所以使用内网穿透进行域名映射这个方法进行本地调试是不可取的，接下来我说说我的方法哈！有些步骤是网上合并的流程，如果有冒犯可以私信我，我会进行修改或者删除，我只是希望后面其他的小伙伴遇到也不会走弯路！！！

步骤

一、 nginx安装

安装 nginx，我电脑是Win10，所以下载的是windows版本
  下载之后复制到电脑其他地方解压，解压后不要不要不要直接双击nginx.exe，在该目录下cmd打开黑窗口进行操作
  启动nginx服务，别在意他是否闪一下。 start nginx
  查看任务进程是否存在，dos或打开任务管理器都行 tasklist /fi "imagename eq nginx.exe 能看到进程说明启动成功了。

二、 修改本地host文件

win+R 输入 C:\WINDOWS\system32\drivers\etc 点击回车，如果路径不对，百度看你系统的路径在哪
  记事本打开hosts文件
  在最后一行添加 127.0.0.1 gongsiyuming.com gongsiyuming.com是你公司公众号的线上域名

三、 配置nginx

修改nginx.conf文件

server {
        listen       80;
        server_name  gongsiyuming.com; //公众号线上地址
        location / {
            root I:\nginx\nginx-1.18.0\html\wechat-complaint; //打包丢到nginx的路径地址
            index index.html index.htm;
            proxy_pass http://localhost:9020; //你本地vue项目启动的ip和端口
        }
    }

参考：
server {
       listen       80;
       server_name  www.test.com（测试服务器网址，这个要和你获取的微信签名的网址对应）;
       
       location /后端项目名/ {
        proxy_pass http://127.0.0.1:端口;
       }
       
       location /前端静态文件项目/ {
        root D:/project/gitCode;（前端项目地址不要带项目名）
         autoindex on;
       }
     }

四、 修改vue项目配置

修改vue.config.js

devServer: {
    port: 9020, // 端口 要与nginx proxy_pass配置的端口保持一致
    host: 'gongsiyuming.com', // 公众号线上地址
}

五、 修改微信公众号授权打开的链接地址路径

this._redirect_uri = encodeURIComponent('http://gongsiyuming.com/#/')

`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect`

六、 重启项目

重启vue项目

重启nignx服务 nginx -s reload

此时在微信开发者工具中填写公众号线上地址就好啦(需要是http)
  
最后
   我将所有步骤合并在一起，按照这个步骤，基本是没什么问题的了，可以直接将浏览器打开的链接地址复制到微信开发者工具就可以直接运行了！