live server 是轻量级首选，因其不依赖全局 node.js 环境，插件自带基于 connect + chokidar 的微型 http 服务器，启动快、内存常驻仅 40–60mb，自动监听文件变化并刷新，且仅在右键或点击 go live 时启动、关闭标签后几秒自动退出。
Live Server 插件为什么是轻量级首选
它不依赖全局 Node.js 环境，插件自带微型 HTTP 服务器（基于 connect + chokidar），启动快、内存占用低（实测常驻约 40–60MB），且自动监听文件变化并刷新——比手动起 npx serve -s 或 python3 -m http.server 少输命令、少开终端。
常见误判是把它当成“重型工具”，其实它比大多数浏览器扩展还轻：安装后无后台进程，仅在你右键点击 HTML 文件或点状态栏 Go Live 时才启动服务；关掉浏览器标签，服务几秒后自动退出。
- 必须认准作者为
Ritwick Dey的原版插件，其他同名插件可能缺失热重载或端口自动切换逻辑 - 不支持
.vue/.ts或构建型项目（如 Vite），那是另一类工具的职责 - 若项目根目录 ≠ HTML 所在目录（比如
/src/index.html），需在设置中配liveServer.settings.root为"./src"，否则路径解析会错位
不用插件时，哪些命令行方案真轻量
当插件不可用（如受限环境、CI 预览）或你想确认底层行为时，这几个命令可直接在 VS Code 内置终端（Ctrl+`）运行，无需额外安装复杂依赖：
-
npx serve -s：最简，-s表示单页应用模式，自动返回index.html；但需本地有npm，且首次运行会下载临时包（后续缓存） -
python3 -m http.server 8000：Python 3.7+ 自带，零依赖；缺点是不支持自动刷新，改完要手动刷新页面 -
ruby -run -e httpd . -p 8000：macOS / Linux 默认 Ruby 可用，和 Python 方案类似，但更冷门，兼容性略差
⚠️ 注意：npx 方案若提示 command not found，不是 VS Code 问题，而是系统未装 Node.js；而 Python/Ruby 方案失败，通常是因为版本太老（如 Python 2.7 不支持 http.server）。
file:// 协议下哪些操作勉强能用
纯静态结构预览（无 JS、无 fetch、无模块导入、无相对路径跳转）时，file:// 是最快路径，但限制极多：
- 右键 HTML 文件 →
Reveal in Explorer→ 双击用系统默认浏览器打开（地址栏显示file:///xxx/index.html） - VS Code 终端中执行：
start index.html（Windows）、open index.html（macOS）、xdg-open index.html（Linux） - Chrome 启动加参数（仅调试用）：
chrome.exe --user-data-dir="C:/temp" --unsafely-treat-insecure-origin-as-secure="file:///"，但新版 Chrome 已逐步禁用该绕过方式
别指望它加载 ./data.json 或执行 import { foo } from './utils.js'——报 net::ERR_FILE_PROTOCOL 是正常现象，不是你代码错，是协议设计如此。
容易被忽略的路径与缓存陷阱
从 file:// 切到 Live Server 后，图片/脚本 404 最常见原因不是代码写错，而是路径基准变了：
- Live Server 默认以 VS Code 当前打开的文件夹为 Web 根目录（
/），不是 HTML 文件所在子目录 -
<img src="logo.png">会请求http://127.0.0.1:5500/logo.png，而非.../src/logo.png - 解决办法只有两个：
<img src="./logo.png">（显式当前目录），或在加<base href="./">
改完 HTML 没刷新？先看右下角状态栏是否显示端口号（如 5500）；若显示 Port already in use，说明端口被占，Live Server 已悄悄换到其他端口（比如 5501），但浏览器仍开着旧地址——得手动更新 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
