live server 必须安装 ritwick dey 原版插件（id：ritwickdey.liveserver），重启 vs code 或点击“重新加载”，并通过“文件→打开文件夹”建立工作区，仅对已保存的 .html 文件生效；右下角显示“go live”且地址栏为 http:// 协议才表示激活，修改后不刷新需确认文件在监听范围内、启用自动保存并禁用浏览器缓存。
VSCode 本身不运行 HTML，直接双击或右键“在浏览器中打开”走 file:// 协议，fetch、import、相对路径、localStorage 全部失效——这不是你代码写错了，是浏览器安全策略卡死的。
Live Server 插件怎么装才真正生效
必须装 Ritwick Dey 原版（扩展 ID：ritwickdey.LiveServer），别选同名但作者不明、下载量低、没签名的“精简版”。装完要重启 VS Code 或点“重新加载”，否则右键菜单和状态栏不会出现 Go Live 按钮。
- 单个
index.html文件拖进 VS Code？插件压根不启动——必须用File → Open Folder打开整个项目文件夹 - 当前编辑器标签页没保存（标题栏带
*）？右键菜单里Open with Live Server不会出现 - 文件扩展名不是
.html（比如是.htm或无后缀）？服务不会识别它为入口
为什么改了 CSS/JS 浏览器没更新
不是插件坏了，大概率是浏览器缓存或路径错位。Live Server 默认只监听当前 HTML 所在目录及其子目录下的变更，跨目录引用（比如 HTML 在根目录，js/app.js 实际在 dist/js/）会漏监听。
- 地址栏显示的是
file:///而不是http://127.0.0.1:5500/？说明根本没走 Live Server，关掉旧标签，重新右键启动 - Chrome DevTools 的
Network面板没勾选Disable cache？CSS 修改后大概率被缓存，Ctrl+F5 强刷也未必清掉 -
<link rel="stylesheet" href="../css/style.css">报 404？Live Server 以 HTML 文件所在目录为根，不是工作区根目录；检查磁盘路径是否真有../css/style.css
Live Preview 和 Live Server 到底该用哪个
Live Preview（ms-vscode.live-preview）只在 VS Code 内置 WebView 渲染 HTML/CSS，不执行 JS、不发请求、不支持模块导入；Live Server 启动真实 HTTP 服务，行为和线上环境一致——选哪个，取决于你此刻要验证什么。
- 只调布局、看响应式、改内联样式？用 Live Preview：点右上角眼睛图标，快、轻、无端口冲突
- 写了
fetch('./data.json')、用了<script type="module"></script>、依赖localStorage？必须切到 Live Server，否则控制台报错是必然的 - 两个插件可以共存，但别指望 Live Preview 能帮你看到
console.log输出或 Network 请求——它连 WebSocket 都不支持
真正容易被忽略的是：Live Preview 的“实时”仅限于静态渲染，而 Live Server 的“实时”依赖 HTTP 协议和 WebSocket 注入；一旦页面需要任何网络能力或 JS 运行时环境，file:// 和 vscode-file:// 就彻底出局——这不是配置问题，是协议层级的硬边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
