live server是vscode中唯一支持fetch、import、相对路径和es模块的html预览方案；右键无“open with live server”因文件未保存、非.html扩展名、语言模式非html、未以文件夹打开工作区或插件未重启启用。
Live Server 是当前 VSCode 中唯一能真正模拟生产环境、支持 fetch、import、相对路径和 ES 模块的 HTML 预览方案；其他“一键打开”类插件（如 View in Browser）走的是 file:// 协议，只要页面里有异步请求或模块导入，立刻报错——这不是你代码有问题，是浏览器根本不允许。
为什么右键没 “Open with Live Server” 选项
这个菜单项不是永远可见的，它依赖几个硬性条件：
- 文件必须已保存，且扩展名是
.html（.htm或未保存状态会失效） - VS Code 右下角语言模式必须是
HTML，不是Plain Text；点一下就能切换 - 插件安装后必须重启 VS Code，否则上下文菜单不注册
- 不能把单个
index.html文件直接拖进 VS Code 窗口——必须以文件夹形式打开项目，Live Server 才能识别工作区根目录 - SSH 或 WSL 远程窗口中，Live Server 默认不启动服务，得在本地 VS Code 中操作
点击 Go Live 后浏览器打不开或报 ERR_CONNECTION_REFUSED
这不是网络问题，90% 是端口冲突导致的静默失败。Live Server 默认用 5500，但 Zoom、Python 的 http.server、甚至另一个 VS Code 窗口都可能占着它。
- 点 VS Code 右下角的
5500→Change Port，换到3000或8080 - 更彻底的办法：在设置里搜
liveServer.settings.port，设为0，让它自动选空闲端口 - 如果用了
liveServer.settings.root自定义根路径，确认路径存在、不含中文或空格——否则服务启动失败但不报错 - Mac 用户遇到此问题，先关掉 Little Snitch 或系统防火墙再试
页面刷新了，但 CSS/JS 还是旧的
Live Server 不管缓存，它只负责起服务 + 发送刷新信号。浏览器强缓存 index.html 里的资源链接，会导致你改了 style.css 却看不到变化。
- 开发时强制硬刷新：
Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac） - 在 VS Code 设置里开启
liveServer.settings.AdvanceCustomBrowserCmdLine，填--disable-http-cache（Chrome）或--private（Firefox） - 最稳的工程做法：给资源加版本参数，比如
<link rel="stylesheet" href="style.css?v=1.0.2">，每次改完手动 +1
真正容易被忽略的是：Live Server 启动后，它服务的是整个工作区根目录，不是当前文件路径。如果你在 /project/src/index.html 里写了 fetch('./api/data.json')，那 data.json 必须放在 /project/api/ 下，而不是 /project/src/api/ ——因为服务根是 /project/，不是 /project/src/。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
