Live Server 默认仅监听 localhost 导致手机无法访问,需将设置中 Host 改为 0.0.0.0、确认端口可用、查电脑局域网 IPv4 地址、放行防火墙入站规则,并确保前端 viewport 等适配移动端。

Live Server 默认不支持局域网访问
Live Server 插件默认只绑定 localhost(即 127.0.0.1),手机连同一 Wi-Fi 后访问电脑的 IPv4 地址(比如 192.168.1.105)会直接失败,浏览器显示“无法连接”或“拒绝连接”。这不是手机或网络问题,是服务端监听地址没放开。
解决方法很简单:改配置,让 Live Server 监听 0.0.0.0 而非仅 127.0.0.1:
- 打开 VSCode 设置(
Ctrl+,或Cmd+,),搜索live server config - 找到
Live Server > Settings: Host,把值从默认的localhost改成0.0.0.0 - 同时确认
Live Server > Settings: Port是可用端口(如5500),避免被占用 - 重启 Live Server(点右下角「Go Live」按钮两次,或先停再启)
手机访问时必须用电脑的局域网 IPv4,不能用 localhost
手机没有和 VSCode 同一进程上下文,localhost 指向它自己,不是你的开发机。必须手动查出电脑在当前 Wi-Fi 下的真实 IPv4 地址:
- Windows:终端运行
ipconfig,找「无线局域网适配器 WLAN」下的IPv4 地址(不是169.254.x.x或127.0.0.1) - macOS:终端运行
ifconfig | grep "inet " | grep -v 127.0.0.1,选192.168.x.x或10.x.x.x那行 - 手机浏览器输入完整地址,例如:
http://192.168.1.105:5500/index.html
注意:不要省略端口号(:5500),Live Server 默认不走 80 端口;如果首页是 index.html,路径可省略,但带后缀更稳妥。
防火墙或杀毒软件可能拦截外部请求
即使配置正确,手机仍打不开,大概率是 Windows Defender 防火墙或第三方安全软件阻止了入站连接。Live Server 启动后监听的是 TCP 端口(如 5500),需要显式放行:
- Windows:搜「高级安全 Windows 防火墙」→「入站规则」→「新建规则」→ 选择「端口」→ TCP → 特定本地端口填
5500(或你设的其他端口)→ 允许连接 → 勾选「域、专用、公用」→ 规则名写Live Server 5500 - macOS:系统设置 → 隐私与安全性 → 防火墙 → 防火墙选项 → 点「+」添加 VSCode.app(不是终端)→ 设为「允许传入连接」
- 临时验证:关掉防火墙试一次,能通就说明是它拦的
移动端预览时样式错乱?检查 viewport 和响应式断点
Live Server 能跑通不等于页面在手机上表现正常。常见错乱不是服务器问题,而是前端本身没适配:
- 确认 HTML
<head>里有标准<meta name="viewport" content="width=device-width, initial-scale=1">,缺这个,手机会以桌面宽度渲染 - 用 Chrome DevTools 的设备模拟器(
F12→ 右上角 ? 图标)先调好布局,再拿真机扫;真机访问时按F12无法调试,得靠console.log或远程调试(较重) - 某些 CSS 单位(如
vh)在 iOS Safari 中行为异常,真机测试比模拟器更可靠
Live Server 本身不处理 CSS/JS 兼容性,它只是个静态文件服务器——能访问 ≠ 能正确渲染。


















