Live Server 默认仅监听 127.0.0.1,需将 liveServer.settings.host 改为 0.0.0.0 并用电脑局域网 IP(如 192.168.1.102:5500)访问,同时确保防火墙放行对应端口。

Live Server 默认只绑定 127.0.0.1,外网设备无法访问;要通过外网 IP(比如手机、同事电脑)访问,必须显式放开主机绑定并确保防火墙/路由器允许流量通过。
Live Server 怎么配成局域网可访问
默认的 http://127.0.0.1:5500 只能本机访问。想让同一 Wi-Fi 下的手机或另一台电脑打开你的页面,得改两个关键配置:
- 在 VSCode 设置里搜
liveServer.settings.host,设为0.0.0.0(不是localhost或留空) - 搜
liveServer.settings.port,填一个常用但没被占的端口,比如3000或8080(避免和 Docker、Pythonhttp.server冲突) - 重启 Live Server:先点状态栏的
Go Live按钮旁的 × 停掉,再右键 HTML 文件重新选Open with Live Server
成功后,VSCode 状态栏会显示类似 http://0.0.0.0:3000/index.html 的地址——这时你本机用 http://localhost:3000 也能打开,而局域网其他设备需用你的本机局域网 IP,例如 http://192.168.1.105:3000/index.html。
为什么手机打不开,常见卡点在哪
配完 0.0.0.0 还打不开,大概率是下面某处拦住了:
立即学习“前端免费学习笔记(深入)”;
- Windows 防火墙默认阻止入站连接:需手动放行对应端口(控制面板 → Windows Defender 防火墙 → 高级设置 → 入站规则 → 新建规则 → 端口 → TCP → 特定本地端口
3000) - Mac 用户需确认“系统设置 → 网络 → 防火墙 → 选项”里勾选了“允许已签名的软件接收传入连接”
- 路由器不转发、NAT 不通:纯局域网分享无需动路由器;但如果想让外网(比如 4G 手机)访问,就得做端口映射+公网 IP,不推荐新手折腾
- 手机和电脑不在同一局域网:比如手机连的是手机热点,电脑连的是公司 Wi-Fi,这种天然不通
调试时 launch.json 怎么同步改
如果你用 VSCode 的 Chrome 调试功能(F5 启动),launch.json 里的 url 必须和 Live Server 实际启动地址一致,否则断连、白屏、报 ERR_CONNECTION_REFUSED:
- 把
"url": "http://localhost:8080/index.html"改成"url": "http://192.168.1.105:3000/index.html"(换成你本机实际局域网 IP) - 或者更稳妥:用
"url": "http://localhost:3000/index.html",这样本机调试没问题;手机访问时只换域名/IP,不碰配置 -
webRoot保持"${workspaceFolder}"即可,不用改
真正容易被忽略的是防火墙那一步——很多人配完 0.0.0.0 就以为万事大吉,结果手机浏览器一直转圈,其实流量根本没进系统。先 ping 通 IP,再 telnet 测试端口,比反复重装插件管用得多。


















