live preview是vscode内置的轻量预览工具，仅适合纯静态html/css快速预览；它不启动http服务，无法支持fetch、es模块导入、localstorage等需网络协议的功能。
VSCode 内置的“内嵌浏览器”功能叫 Live Preview，不是 Live Server，两者完全不兼容——它不启动 HTTP 服务，也不解决 fetch、import、localStorage 等问题，只适合纯静态结构/样式快速瞄一眼。
Live Preview 是什么，适合谁用
Live Preview（插件 ID：ms-vscode.live-preview）是微软官方出品的轻量预览工具，把 Chromium 渲染引擎嵌进 VSCode 编辑器右侧面板。它不走网络协议，而是直接解析 HTML/CSS/JS 文本并渲染，所以：
- 不依赖
http://或file://协议，也就绕不开浏览器对file://的限制——fetch('./data.json')依然报net::ERR_FILE_PROTOCOL -
<script type="module"></script>会失败，ESM 导入路径全部 404 - CSS 和 JS 修改后约 300ms 自动刷新，但仅监听当前打开的已保存文件，不监听子目录或软链接
- 只支持
.html、.htm、.css、.md，自定义后缀（如.svelte或.astro）不生效
怎么启用 Live Preview，为什么点不动
必须同时满足三个条件，右上角眼睛图标才会出现且可点击：
- 已安装插件
ms-vscode.live-preview（注意不是ritwickdey.LiveServer） - 当前编辑器标签页中**已打开并已保存**一个
.html文件（未保存的临时文件不触发） - 项目是以“文件夹”方式打开的（单独拖一个
index.html进来，插件不会激活）
快捷键是 Ctrl+Shift+P → 输入 Live Preview: Show Preview；或者点编辑器右上角那个“眼睛”图标。如果没反应，先检查这三点。
Live Preview 的路径解析规则和常见 404 原因
它把当前 HTML 文件所在目录当作“根”，所有相对路径都基于此计算——这点和 Live Server 一致，但后果更隐蔽：
-
<img src="logo.png">：找的是 HTML 同级目录下的logo.png -
<link href="../css/main.css">：向上一级再进css/目录找，如果目录结构不对，立刻 404 - 它**不加载外部域名资源**，
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>能显示，但控制台会警告跨域（实际不影响），而本地./utils.js就直接挂掉 - 修改 CSS 时，样式会热更新；但改 JS 逻辑，不会执行，除非手动刷新预览面板（
Ctrl+R）
别把它当 Live Server 用，尤其有这些代码时
只要项目里出现以下任一情况，Live Preview 就不该是首选：
- 用了
fetch('./config.json')或XMLHttpRequest加载本地数据 - 写了
<script type="module"></script>或import语句 - 依赖
localStorage、indexedDB、Service Worker - 路径里有中文、空格或特殊符号（部分旧版本 Live Preview 解析失败）
这些场景下，file:// 协议限制照常生效，而 Live Preview 没有 HTTP 服务兜底——它只是个“高级版文本渲染器”，不是开发服务器。真要调试交互逻辑，老老实实用 ritwickdey.LiveServer，配好 liveServer.settings.port 和 liveServer.settings.root 才稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
