Live Server是唯一支持手机端同步访问的方案，因其启动真实HTTP服务器（默认http://127.0.0.1:5500），配置host为0.0.0.0并放行端口后，手机同WiFi下即可用电脑IP访问；而file://协议和tasks.json等方式无法跨设备加载本地文件。
Live Server 是唯一能直接支持手机端同步访问的方案，其他方式（如双击打开、file:// 协议、自定义 tasks.json）在手机浏览器中根本无法加载本地文件或跨域失败。
为什么只有 Live Server 能让手机访问
手机浏览器不支持直接读取电脑本地磁盘上的 HTML 文件（file:// 路径会被拦截），也无法通过局域网访问未启动 HTTP 服务的静态资源。Live Server 启动的是一个真正的本地 HTTP 服务器（默认 http://127.0.0.1:5500），只要手机和电脑在同一 WiFi 下，就能用电脑 IP 替换 127.0.0.1 访问。
- 双击打开 HTML → 浏览器走
file://协议 → 手机无法识别该路径 -
tasks.json中调用start或浏览器路径 → 仍生成file://地址 → 无效 - Live Server 默认绑定
localhost→ 手机访问时需手动改成电脑真实 IP（如192.168.1.105:5500）
配置 Live Server 允许外部访问
默认情况下，Live Server 只监听 localhost，手机请求会被拒绝。必须修改扩展设置，让它监听所有网络接口。
- 打开 VSCode 设置（
Ctrl + ,），搜索live server.config - 找到
Live Server > Settings: Host，把值从localhost改成0.0.0.0（允许所有 IP 访问） - 确保
Live Server > Settings: Port是开放端口（默认5500，一般无需改） - 保存后重启 VSCode，再右键 HTML 文件选
Open with Live Server
手机访问前必须确认的三件事
少一个环节，地址就打不开。
- 电脑和手机连的是同一个 WiFi（不是手机热点、不是不同路由器的 5G/2.4G 双频合并网络）
- 在电脑上运行
ipconfig（Windows）或ifconfig（macOS/Linux），找到 IPv4 地址（如192.168.1.105），不是127.0.0.1或::1 - 把浏览器地址栏里原本的
http://127.0.0.1:5500/index.html换成http://192.168.1.105:5500/index.html，然后粘贴进手机浏览器并回车
常见打不开的原因和对应检查点
大部分问题出在网络层或配置细节，和代码无关。
- 手机浏览器显示“无法连接到服务器” → 检查电脑防火墙是否放行了
5500端口（Windows Defender 防火墙需添加入站规则） - 页面空白或 CSS/JS 加载失败 → 查看 HTML 中资源路径是否用了绝对路径（如
/css/style.css），应改为相对路径（./css/style.css）或以http://开头的完整 URL - 手机能打开首页但点击跳转 404 → 确保所有链接用的是相对路径（
about.html），不要写成/about.html（会从服务器根目录找） - VSCode 右下角没出现 Live Server 启动提示 → 插件未启用，或当前打开的不是 HTML 文件（注意文件名后缀必须是
.html）
真正卡住人的从来不是插件装不装得上，而是 0.0.0.0 这个监听地址、防火墙放行、以及路径里那个容易被忽略的开头斜杠 / —— 它会让所有相对引用失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
