在 Mac 上将项目起在 80 端口

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 端口](