一个不断学习的前端菜鸟，欢迎指正，别喷。。。
前言
场景: 公司公众号线上域名后端大佬已经配置好了，前端使用的是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)
最后
如果能帮到你，我也没有很开心，哈哈哈。
如有不对的地方，还请指正。
