1. 因为webpack起的devServer 指向的是localhost， 而公众号登录通常会跳转一个微信授权获取code的地址，如
const GET_OPEN_ID_URL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfdfea590dfe9a10ereqd1cf11e1&redirect_uri=http://www.love.com/dist/index.html&response_type=code&scope=snsapi_base&#wechat_redirect`
而上面的 redirect_uri 又必须是微信验证过的网址，不是能是localhost:8000这样的地址，所以就需要修改本的hosts文件，强制跳至127.0.0.1
2. 修改hosts文件，内容如下
127.0.0.1 localhost
127.0.1.1 gyx-PC
127.0.0.1 u.jiyoukeji.cn
127.0.0.1 www.love.com
此时微信再跳转 www.love.com 时，会跳至127.0.0.1的端口
3. 但是通常网页的默认端口是80,也就是说 http://www.love.com/dist/index.html 会跳至 localhost:80 (127.0.0.1:80)端口，而webpack的devServer的地址通常是locahost:8080等。所以需要起一个nginx 服务器， 将80端口的请求反向代理至8080端口，nginx 代理服务器的核心部分配置如下
server {
listen 80;
server_name www.love.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
#root html;
#index index.html index.htm;
proxy_pass http://localhost:8080;
}
}
由于我的开发环境用的deepin，通常情况会在Home下写一个简单的脚本用来一键启动
#!bin/bash
cd /usr/local/nginx
sudo ./sbin/nginx -c ./conf/love.conf
4. 由于hosts 文件中，已经将www.love.com的地址定向至了localhost，因为所有指向该地址的真实请求都不会生效，因些在开发环境下还要将请求api的接口改为ip请求。不能是原来的地址请求的方式。
5. 需要注意的问题，由于修改了hosts文件，如果(例)www.love.com 上有其他的开发项目，会导致请求无效的问题，记得要改回来。
网友评论