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

date: 2021-03-07 16:46:12 tags: js

环境

mac, vue-cli3

修改host文件

$ sudo vi /etc/hosts

# 添加一行  coolo.top 微信绑定的域名

127.0.0.1   coolo.top

方案1， 使用80端口

vue.config.js 添加

devServer: {
  port: 80,
  host: "coolo.top",
  disableHostCheck: true,
  https: false,
  hotOnly: false,
}

sudo 运行

因为MAC使用1024以下端口，需要root模式，所以需要加sudo

$ sudo npm run serve

缺点

80端口修改页面后， 本地调试页面刷新缓慢。 更新npm遇到BUG， 80端口无法使用，所以使用方案2

方案2， 使用8081 端口转发 80

vue.config.js 修改为

devServer: {
  port: 9090,
  host: "coolo.top",
  disableHostCheck: true,
  https: false,
  hotOnly: false,
}

然后正常启动服务， 就可以微信中使用80端口调试

配置转发

以 root 身份添加或修改 /etc/sysctl.conf 文件，加入以下两行

net.inet.ip.forwarding=1
net.inet6.ip6.forwarding=1

查看当前端口转发功能状态：

$ sudo sysctl -a | grep forward
net.inet.ip.forwarding: 0
net.inet6.ip6.forwarding: 0

新建文件。/etc/pf.anchors/http 文件内容如下：

rdr pass on lo0 inet proto tcp from any to any port 80 -> 127.0.0.1 port 9090

检查其正确性：

$ sudo pfctl -vnf /etc/pf.anchors/http

修改 pf 的主配置文件 /etc/pf.conf 开启我们添加的锚点 http。

# 在 rdr-anchor "com.apple/*" 下添加
rdr-anchor "http-forwarding"

# 在 load anchor "com.apple" from "/etc/pf.anchors/com.apple" 下添加
load anchor "http-forwarding" from "/etc/pf.anchors/http"

最后导入并允许运行：

$ sudo pfctl -ef /etc/pf.conf

使用 -e 命令启用 pf 服务。使用 -E 命令强制重启 pf 服务：

$ sudo pfctl -E

使用 -d 命令关闭 pf：

$ sudo pfctl -d