Mac系统下Vue项目启动80端口报错的解决方法咨询

MacOS默认限制普通用户绑定1024以下端口，要让Vue项目用80端口启动，可通过以下几种方式解决：

方法一：用sudo权限直接启动项目 #

以root权限运行启动命令，绕过端口权限限制：

• 基于vue-cli的项目：

  sudo npm run serve -- --port 80
  

• 基于Vite的项目：

  sudo vite --port 80
  

注意：sudo启动后，项目生成的临时文件或依赖可能会被赋予root权限，后续普通用户操作报错时，可执行以下命令修复权限：

sudo chown -R $USER:$USER .

方法二：端口转发（无需修改项目启动端口） #

将80端口的流量转发到Vue项目实际使用的1024以上端口（比如3000），用户访问80端口时会自动跳转至项目端口：

1. 临时生效（重启后失效）：

   echo "rdr pass inet proto tcp from any to any port 80 -> 127.0.0.1 port 3000" | sudo pfctl -ef -
   

   执行后正常启动Vue项目在3000端口即可。
2. 永久生效：
   • 编辑/etc/pf.conf文件，在末尾添加规则：

     rdr pass inet proto tcp from any to any port 80 -> 127.0.0.1 port 3000
     

   • 加载新规则并重启pf服务：

     sudo pfctl -f /etc/pf.conf && sudo pfctl -e
     

方法三：给Node赋予绑定低端口的权限 #

通过系统权限设置，让Node进程无需root也能绑定1024以下端口：

1. 先找到Node的安装路径：

   which node
   

2. 执行命令赋予权限：

   sudo setcap cap_net_bind_service=+ep /usr/local/bin/node
   

   注意把/usr/local/bin/node替换成你实际的Node路径。
3. 之后直接正常启动Vue项目指定80端口即可，无需sudo：
   • vue-cli项目：npm run serve -- --port 80
   • Vite项目：vite --port 80
     提示：后续更新Node版本时，需要重新执行这条权限赋予命令。

内容的提问来源于stack exchange，提问作者Peter