Mac OS 上开发微信网页项目,微信网页项目的开发我在之前的文章提过了,本地开发的时候要先修改 hosts ,然后将项目启动在 80 端口,这样就可以通过域名来直接访问我们的项目,但是当我在 Mac 上运行项目的时候,发现项目并没有起在 80 端口,而是随机分配了一个端口。

修改 hosts

Mac 上也有 hosts ,修改方式在内容上和在 Windows 上是一样的,我比较习惯用终端,这里只陈述一下终端的方法, 你喜欢从访达里打开修改的话,建议先复制一份出来改好之后再把原先的覆盖掉比较方便。

使用 sudo vim /etc/hosts 输入密码后,打开 hosts 文件,编辑完成后,因为 hosts 文件默认是只读文件,所以先按 Esc 键,输入 :set noreadonly 回车,再输入 :wq 就可以保存文件了。

不建议使用命令将 hosts 文件直接改成可读写的,因为 hosts 毕竟还是重要的系统文件,为了安全起见,将其设置为只读是没毛病的

绑定 80 端口

利用 pfctl 做网络层的转发,转发 80 端口的请求到 9090 端口,此处的端口号建议选择大一点的数字,防止占用系统使用的端口号,因为前端的 vue 项目默认都是起在 8080 端口,因此不建议设置为 8080 端口。修改 pf.conf 文件, sudo vim /etc/pf.conf ,和上面一样的,输入密码后打开文件,修改后的文件如下:

scrub-anchor "com.apple/*"
nat-anchor "com.apple/*"
rdr-anchor "com.apple/*"
rdr on lo0 inet proto tcp from any to 127.0.0.1 port 80 -> 127.0.0.1 port 9090
dummynet-anchor "com.apple/*"
anchor "com.apple/*"
load anchor "com.apple" from "/etc/pf.anchors/com.apple"

运行以下命令让转发生效或关闭

# Disable the packet filter.
sudo pfctl -d 
sudo pfctl -f /etc/pf.conf
# Enable the packet filter.
sudo pfctl -e

这样就可以转发 80 端口的网络请求到 9090 端口,注意访问的还是 80 端口,只是我们启动项目时监听 9090 端口。需要注意的是,这样我们的项目和在 Windows 上开发是使用的不同的配置,Windows 的项目配置中是监听的 80 端口,Mac 中是监听的 9090 端口,但是访问的都是 80 端口,不过 Mac 多了一层转发罢了。可以在 package.json 中加一行配置

"dev:mac": "vue-cli-service serve --port 9090"

热更新

这样项目确实可以在本地的 80 端口访问并打开了,但是还有一个问题是,项目不能随着代码的保存进行自动的热更新,因为你当前访问的是 80 端口, 9090 端口是进行着热更新的,80 端口并没有,此问题还未找到解决办法,待续。。。

参考

[Mac OS 绑定 80 端口](

标签: none

添加新评论