live server 是 vscode 中最轻量稳定的本地 http 服务插件，专为 html/css/js 静态开发设计，通过启动真实 http:// 服务解决 file:// 协议下 fetch、模块导入、相对路径等限制，并在保存文件时自动刷新；它不处理构建打包或后端逻辑。
Live Server 是 VSCode 里最轻量、最稳的本地 HTTP 服务插件，专为 HTML/CSS/JS 静态开发设计。它不解决构建、打包或后端逻辑，只做一件事：起一个真实 http:// 服务，让浏览器能正确加载资源、执行 fetch、使用模块导入，并在你保存文件时自动刷新或热重载。
为什么不能直接双击 HTML 文件？
双击打开走的是 file:// 协议，浏览器会禁用 fetch、import、跨目录读取 CSS/JS 等关键能力——哪怕页面看起来“能显示”，很多现代写法实际已失效。
-
fetch("./data.json")会直接报net::ERR_FAILED -
import { foo } from "./utils.js"报Failed to load module script - 相对路径如
./css/style.css在子目录 HTML 中可能解析错位，但file://下又不报 404，掩盖问题
Live Server 启动后没反应？先看这三件事
不是插件坏了，是服务根本没被触发。常见卡点就三个：
- VSCode 必须以**文件夹形式打开工作区**（
File → Open Folder），不能只是拖一个index.html进去 - 当前编辑器标签页必须是**已保存的
.html文件**（未命名、.txt或.htm后缀都不行） - 右下角状态栏要出现类似
Live Server: http://127.0.0.1:5500——没这个，说明服务压根没起来
如果右键菜单里没有 Open with Live Server，优先检查右下角语言模式是不是 HTML（不是 Plain Text），点一下可切换。
CSS/JS 修改了但页面没更新？别怪 Live Server
Live Server 默认只监听 .html、.htm 文件保存并触发整页刷新；.css 和 .js 的改动默认**不刷新页面**，只发热重载通知（且依赖浏览器配合）。
- 保存
style.css后，VSCode 右上角应弹出Reloading CSS…提示——没有，说明 Live Server 没监听到该文件（检查liveServer.settings.fileExtensions设置） - 浏览器是否禁用了缓存？开发者工具 →
Network标签页 → 勾选Disable cache（仅 DevTools 打开时生效） - 路径写错更隐蔽：
<link rel="stylesheet" href="css/style.css">在src/pages/index.html中，会被请求为http://127.0.0.1:5500/css/style.css，但文件实际在src/css/style.css—— 404 就这么来的
想在手机上看？改 host 不等于搞定
默认 localhost 绑定只允许本机访问。手机连同一 Wi-Fi 打不开，不是网络问题，是服务没对外暴露。
- VSCode 设置里搜
liveServer.settings.host，值必须设为0.0.0.0（不是localhost，也不是留空） -
liveServer.settings.port设成固定值（比如5500），别用0（自动选端口会导致手机书签失效） - 用电脑局域网 IP 访问，比如
http://192.168.1.105:5500；Windows 运行ipconfig，macOS 运行ifconfig | grep "inet " | grep -v 127.0.0.1 - Windows Defender 防火墙或 macOS 防火墙需放行该端口；部分路由器开启「AP 隔离」也会拦住，需关闭
真正容易被忽略的是：Live Server 的根路径基准永远是“当前 HTML 文件所在目录”，不是项目根目录。这个行为不会因 liveServer.settings.root 改变而彻底统一——它只影响服务启动点，不改变浏览器对相对路径的解析逻辑。路径问题，永远得从 Network 面板里那个 404 请求 URL 开始反推。
