前言:在macOS中,对于1024以下的端口需要使用root权限才可以使用,因此在mac中启动本地的vue-cli项目的时候,端口443无法正常使用,即使在配置文件中配置了443端口,启动项目的时候,仍然会是1024端口,如下图:
解决方案有有两个:
端口转发
使用sudo npm run dev 获取权限启用443端口(推荐使用)
方案一的操作步骤:
首先在 /etc/pf.anchors/ 新建一个 http 文件内容如下:
rdr pass on lo0 inet proto tcp from any to any port 443 -> 127.0.0.1 port 8443
注意:8443可根据自己的实际情况定义。意思是将443端口号转发至8443端口(本地服务的端口号)
然后使用 pfctl 命令检测配置文件
$ sudo pfctl -vnf /etc/pf.anchors/http
如果没有报错(正确的打印了配置信息, 没有明显的出错信息),即修改 pf 的主配置文件 /etc/pf.conf,来引入这个转发规则:在 rdr-anchor "com.apple/*" 下, 添加如下 anchor声明:
rdr-anchor "http-forwarding"
注意:pf.conf 对指令的顺序有严格要求, 否则会报出 Rules must be in order: options, normalization, queueing, translation, filtering 的错误, 所以相同的指令需要放在一起.
再在 load anchor "com.apple" from "/etc/pf.anchors/com.apple" 下, 添加 anchor 引入:
load anchor "http-forwarding" from "/etc/pf.anchors/http"
最后, 导入并允许运行 pf
$ sudo pfctl -ef /etc/pf.conf
注意:每次重启mac的时候需要在执行一下上面的代码;或者在执行上面代码之后,再执行:
sudo pfctl -e
配置端口转发之后,需要将vue项目的运行端口号改为8443,然后npm run dev启动项目之后,在浏览器访问地址https://xxx即可,不需要加上8443的端口
方案二的操作步骤
方案一需要修改项目的端口配置,方案二不需要,只要将项目的所在文件在项目启动时,能使用443端口即可;首先需要把相关文件的所有者改为root,使用sudo才能正常使用root权限,如下:
sudo chown root <vue项目文件夹路径>
修改所有者为root后,使用sudo再次启动服务,授权后终于成功变成443端口
注意:方案一和方案二只能选择其中一个,即如果启用了方案一,在使用方案二就行不通了。使用方案二,需要每次启动项目的时候都使用sudo npm run dev