live server是唯一能真正解决html预览问题的工具，因其通过http://协议启动本地服务器，规避file://协议下fetch、模块导入、相对路径及storage等安全限制；必须安装ritwick dey原版插件、用“文件→打开文件夹”建立工作区、右键html文件启动，且不适用于vite/webpack或.vue/.ts项目。
Live Server 是唯一能真正解决 HTML 预览问题的工具，其他方式（双击、右键“在浏览器中打开”、Preview HTML）全都会在 fetch、import、相对路径等场景下静默失败。
为什么 Open in Default Browser 一定不行
它只是模拟双击打开，走的是 file:// 协议。浏览器出于安全限制，会直接拦截以下行为：
-
fetch('./data.json')→ 控制台报Not allowed to load local resource -
<script type="module"></script>→ 报Failed to load module script -
../css/main.css→ 404，而./img/logo.png有时能显示（取决于浏览器宽松程度） -
localStorage和 Service Worker 在file://下根本不可用
你看到页面“有内容”，不等于它能正常运行 JS 逻辑——这是最常被误判的点。
Live Server 必须这样装、这样开才生效
装错版本或启动姿势不对，插件就形同虚设：
- 只认作者是
Ritwick Dey的原版插件（扩展 ID：ritwickdey.LiveServer），别选“精简版”或下载量低的同名插件 - 必须用 File → Open Folder 打开整个项目文件夹，不能只拖一个
index.html进来（否则路径解析全错） - 右键 HTML 文件 →
Open with Live Server，比点状态栏Go Live更可靠（后者在未保存或非 .html 标签页下会静默失败） - 安装后要点击“重新加载”或重启 VSCode，否则右键菜单和状态栏不会出现选项
端口冲突、路径错乱、刷新不生效？先查这三处
不是插件坏了，而是环境没对齐：
- 浏览器地址栏还是
file:///开头 → 没真正启动 Live Server，关掉旧标签，重新右键启动 - VS Code 状态栏没显示
Port: 5500→ 服务根本没起来，检查文件是否已保存、扩展名是否为.html、是否在工作区根目录下 - CSS/JS 修改后没更新 → Live Server 默认加了
Cache-Control: max-age=3600，开发者工具 Network 面板勾选Disable cache，或按Ctrl+Shift+R强刷
别在 Vite/Webpack 项目里同时开 Live Server
它们是互斥的开发服务器：
- Vite 默认起在
http://127.0.0.1:5173，Live Server 默认占5500，端口冲突只是表象 - 更关键的是：Vite 有 HMR（改 CSS 不刷新页面），Live Server 只做整页 reload，两者机制打架会导致白屏或 404
- 用了
.vue、.svelte或 TypeScript，Live Server 就完全不适用——它不编译、不转译、不打包
相对路径的基准永远是 HTML 文件所在目录，不是工作区根目录；这个细节一旦搞错，../ 就全崩，而且错误不报在控制台，只表现为资源 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
