前后端分离的微信开放平台网站应用实现微信登录的本地调试

前面那一篇说了基于laravel+vue的实现方式和不要踩的坑，这一篇记录一下如何实现本地调试和线上部署。

当然，线上就按上一篇就好了，在vue-wxlogin里面配置appid（微信开放平台里面的网站应用的appid，需要先申请），laravel里需要配置appid和secret。

现在主要说一下如何在本地调试。vue-wxlogin显示二维码的时候需要appid和回调地址一致，如果把线上域名反向隧道到本地，那么线上就用不了，如果用本地的hosts来解析，那么就无法同时访问线上的版本。所以比较好的办法是专门申请一个测试用的网站应用，比如portal.local.futuremeng.sincebirth.spac，通过vi /etc/hosts添加127.0.0.1 portal.local.futuremeng.sincebirth.spac来将这个域名解析到本地环境。

然后在本地的nginx中添加一个站点，配置文件如下：

server {
     listen 80;
     server_name portal.local.futuremeng.sincebirth.spac;
     charset utf8;
     location / {
        proxy_pass http://192.168.2.180:6060/;
        add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'self'; style-src 'self' 'unsafe-inline';";
        proxy_set_header Host            $host;
        proxy_set_header X-Real-IP       $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    }
}

其中，IP换成你自己的电脑的IP，如果是docker跑的nginx，需要指定为本机的局域网IP，也就是docker的宿主机IP，否则，如果设置成127.0.0.1是访问不到后面在vscode中建立的服务的。

最后打开vscode，打开vue项目，设置一下devServer的port，我用6060是为了同时npm run serve起多个前端项目，而这一个专用这个端口，以便nginx这里能够保持可用。