live server通过本地http服务器提供完整web环境，支持跨域、实时刷新、浏览器调试及多文件协同；live preview基于vscode webview内嵌渲染，无服务器、不支持外部资源加载、无调试工具、仅单文件预览。
Live Server 是当前最可靠、开箱即用的 HTML/CSS 实时预览方案；Live Preview 适合纯静态快速查看，但不执行 JS、不加载外部资源、热更新不稳定——真要验证交互或样式响应，必须走 HTTP 服务。
Live Server 点“Go Live”没反应？先查工作区和入口文件
根本问题不是插件坏了，而是它根本没启动成功。Live Server 默认只在**已打开的文件夹工作区**下运行，且默认查找根目录下的 index.html（小写、无空格、无中文）。单个 HTML 文件拖进 VSCode 不生效。
- 确保你通过“文件 → 打开文件夹”打开了整个项目目录，资源管理器里能看到
index.html和css/等子目录 - 右键编辑器里的
index.html标签页 → 选Open with Live Server，比点状态栏Go Live更稳定 - 如果主文件叫
home.html，它不会自动加载；浏览器地址栏手动改成http://127.0.0.1:5500/home.html - VSCode 右下角没显示
Live Server: 5500？说明服务压根没起来——按Ctrl+Shift+U打开输出面板，切换到 Live Server 日志，看是否有Port is already in use或路径错误
CSS 修改后页面没变？别怪插件，先关浏览器缓存
Live Server 支持 CSS 热重载，但前提是浏览器愿意重新拉取文件。开发中 Chrome/Firefox 默认缓存 CSS 很狠，改了 style.css 却看不到效果，90% 是这个原因。
- 保存 CSS 后，注意 VSCode 右上角是否弹出
Reloading CSS…提示——有则说明 Live Server 已触发，问题在浏览器端 - Chrome 中按
F12→ 切到Network标签 → 勾选Disable cache（仅 DevTools 打开时生效） - 检查 HTML 中引入路径是否拼错：
<link rel="stylesheet" href="css/style.css">对应磁盘路径必须是./css/style.css，不是./assets/css/style.css - 避免在 CSS 里用多层
@import，Live Server 对嵌套@import的热更新支持不可靠
Live Preview 预览空白或不刷新？确认文件类型和保存状态
Live Preview（注意不是 Live Server）是微软官方轻量预览工具，但它不启动服务、不执行 JS、不处理跨域请求，只做静态解析。它对环境更敏感，容易静默失败。
- 必须安装
ms-vscode.live-preview（作者 Microsoft），别装成ms-vscode.live-server - 只支持已保存的
.html或.htm文件；未保存的临时标签页、.njk、.svelte等模板文件不识别 - 右键编辑器标签页 →
Open with Live Preview最可靠；状态栏按钮有时灰掉或失效 - 修改后不刷新？检查是否在 WSL、远程 SSH 或符号链接路径下开发——Live Preview 不监听软链目标路径
- 内联
<style></style>中的 CSS 修改目前不支持热更新，只有外链.css文件才可能触发
为什么不能直接双击 HTML 文件？file:// 协议的硬伤
双击打开走的是 file:// 协议，浏览器会拦截绝大多数现代 Web 行为：fetch 请求 404、@font-face 加载失败、JS 模块导入报错、CORS 策略拒绝跨目录读取……这不是你代码的问题，是浏览器安全模型决定的。
-
file://下./img/logo.png能加载，但../data/config.json很可能被拒，取决于浏览器版本 - 所有基于相对路径的资源引用，行为在
file://和http://下不一致，调试时极易误判 - VS Code 内置的“Open in Default Browser”命令本质就是双击，同理不可靠
- 哪怕只是写一个带 fetch 的简单 demo，也必须用 Live Server 启动 HTTP 服务才能跑通
真正容易被忽略的点：如果你在公司网络、开了防火墙或用了代理，localhost 可能被拦截——浏览器打不开页面，但 Live Server 日志仍显示 “Starting server”，这时候该查本地网络策略，而不是重装插件或改配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
