无路由器时,如何在Mac上搭建本地网络部署Web应用?
无WiFi路由器环境下实现Mac与移动端的本地Web应用互通
完全可以在无外部WiFi/蜂窝网络的环境下实现需求,核心是让Mac创建本地自组网,并确保服务监听所有网卡地址,同时配置好防火墙权限。以下是具体操作步骤:
一、修改服务监听地址(关键)
默认情况下,Vite和PHP服务只会绑定127.0.0.1(仅本地回环),外部设备无法访问,必须改为绑定所有网卡地址0.0.0.0:
- Vue/Vite项目:
编辑项目根目录的vite.config.js,添加server.host配置:
或者启动时直接加参数:export default defineConfig({ server: { host: '0.0.0.0', // 绑定所有网卡 port: 5173 } })npm run dev -- --host 0.0.0.0 - PHP服务:
如果用PHP内置服务器,启动命令改为:php -S 0.0.0.0:8888
若使用MAMP/XAMPP等集成环境,进入设置面板,将服务的监听地址改为0.0.0.0,并开启“允许外部访问”选项。
二、在Mac上创建本地自组网
有两种方式可选:
- 方式1:开启Mac个人热点
- 打开「系统设置」→「通用」→「共享」
- 勾选「互联网共享」,在“共享你的连接自”下拉选“无”(无需外部网络),“用以下端口共享给其他电脑”选“Wi-Fi”
- 点击「Wi-Fi选项」,设置热点名称、密码和加密方式(建议选WPA2/WPA3),然后开启共享
- 移动端搜索并连接这个热点
- 方式2:创建电脑到电脑网络
- 点击Mac顶部菜单栏的Wi-Fi图标,选择「创建网络」
- 设置网络名称、密码和加密方式,点击「创建」
- 移动端连接这个网络
三、配置Mac防火墙权限
- 打开「系统设置」→「网络」→「防火墙」
- 点击「选项」,确保Vite(node进程)和PHP服务被允许“接收传入连接”
- 若测试时仍无法访问,可临时关闭防火墙(测试完成后再开启)
四、移动端访问服务
- 在Mac终端执行
ifconfig,找到Wi-Fi对应的inet地址(比如192.168.2.1) - 在移动端浏览器输入:
http://[Mac的IP地址]:5173(客户端)和http://[Mac的IP地址]:8888(服务端)
关于你之前遇到的问题
你之前创建网络后无法访问localhost,本质是两个原因:
- 服务仅绑定
127.0.0.1,外部设备无法路由到这个地址 - Mac防火墙默认阻止了外部设备对本地服务的连接请求,或者网络安全策略限制了跨设备访问
内容的提问来源于stack exchange,提问作者isUnknown
相关产品推荐
相关产品推荐

