live preview是微软官方插件，基于vscode内置webview渲染html，不启动http服务，不执行js、不加载外部资源、不支持模块导入，仅适合静态结构和纯css预览；live server则启动本地服务器，提供真实浏览器环境，支持完整web功能。
Live Preview 不是真正的浏览器预览，它不执行 JS、不加载外部资源、不支持模块导入，只适合看静态结构和纯 CSS 布局。
Live Preview 是什么，为什么它不能替代 Live Server
Live Preview 是微软官方插件（ms-vscode.live-preview），它在 VS Code 内部用 WebView 渲染 HTML，不启动任何 HTTP 服务。你看到的“预览”本质是 VS Code 自己解析并渲染 DOM，不是真实浏览器环境。
- 它不运行
<script type="module"></script>，会直接报Failed to load module script -
fetch('./data.json')或XMLHttpRequest全部失败，因为 WebView 禁用本地资源加载 - 相对路径如
../css/main.css可能解析错位，尤其在多层目录下 - 不支持
localStorage、Service Worker、Canvas部分 API，行为与 Chrome/Firefox 不一致
怎么正确启用 Live Preview
必须满足三个硬性条件，缺一不可：
- 已安装插件
ms-vscode.live-preview（注意作者是 Microsoft，不是live-server） - 当前编辑器中打开的是已保存的文件，且扩展名必须是
.html或.htm - 文件不能是未保存的临时标签页（比如 Untitled-1）
启用方式有两种：
– 快捷键 Ctrl+Shift+V（Windows/Linux）或 Cmd+Shift+V（Mac）
– 点击编辑器右上角的眼睛图标（仅当上述条件全部满足时才出现）
Live Preview 的刷新机制和常见失效点
它靠监听文件变更自动刷新，但有明确边界：
- 修改后约 300ms 触发重绘，但不会重新执行 JS 脚本（
<script></script>只在首次加载时运行） - 不监听软链接目录、WSL 路径、网络盘（如 OneDrive/Google Drive 同步文件夹）下的变更
- 如果预览面板空白，先检查：是否点了右上角眼睛图标？是否已保存？文件名是否含中文或空格？
- 改了 CSS 却没变？Live Preview 不支持 CSS 热重载，必须手动保存 + 等待自动刷新，且不处理
@import嵌套
什么时候该果断换回 Live Server
只要页面里出现以下任意一项，Live Preview 就该停用：
-
import或export语句（哪怕只是import './utils.js'） -
fetch()、axios.get()、XMLHttpRequest - 使用了
localStorage、sessionStorage、history.pushState - HTML 中引用了
../assets/config.json这类跨级相对路径
真正容易被忽略的是：Live Preview 的“能显示”，常让人误判功能正常；而实际 JS 逻辑、数据请求、路由跳转等，在它里面根本没跑起来——这不是 bug，是设计如此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
