nginx实现本地调试微信公众号线上配置域名

一个不断学习的前端菜鸟，欢迎指正，别喷。。。

前言

  场景: 公司公众号线上域名后端大佬已经配置好了，前端使用的是vue框架并引入微信-js-sdk，域名已经确定的情况下，想要调试微信的功能就得发布到线上，然后在微信开发者工具上打开上线地址。这对于菜鸟的我，就有点难受了啊，毕竟试错试开发（手动狗头），打个断点，提交一下代码，console一下，提交一下代码。这好家伙，这一天得多少个提交记录。。。，还容易让别人发现我菜鸟身份，哈哈哈。

步骤

一、 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 gongzhonghao.com gongzhonghao.com是你公司公众号的线上域名

三、 配置nginx

  修改nginx.conf文件

    server {
        listen   80; 
        server_name  gongzhonghao.com; // 公众号线上地址
        location / {
            proxy_pass http://localhost:8086; //你本地vue项目启动的ip和端口
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

四、 修改vue项目配置

  修改vue.config.js 我是vue-cli4，其他版本自行修改

    devServer{
        disableHostCheck: true
    }

  此步骤是为解决Invalid Host header报错

五、 重启项目

  重启vue项目

  重启nignx服务 nginx -s reload

  此时在微信开发者工具中填写公众号线上地址就好啦(需要是http)

最后

  如果能帮到你，我也没有很开心，哈哈哈。

  如有不对的地方，还请指正。