live server 是唯一能真正实现 html + css 样式实时预览的可靠方案；live preview 因使用 vscode-file:// 协议，不支持外部 css/js 加载、fetch 请求及模块脚本，无法满足真实浏览器环境下的样式调试需求。
Live Server 是唯一能真正实现 HTML + CSS 样式实时预览的可靠方案；Live Preview 插件不走 HTTP 协议，无法加载外部 CSS/JS，也不执行 <script type="module"></script>，不能算“样式实时预览”。
为什么 Live Preview 不能用于 CSS 样式调试
VS Code 自带的 ms-vscode.live-preview 插件看似方便，但它本质是用 vscode-file:// 协议在内部 WebView 渲染，不是真实浏览器环境：
-
<link rel="stylesheet" href="style.css">极易 404 —— 相对路径解析基准不稳定，尤其跨目录引用时 - 所有
fetch()、XMLHttpRequest请求直接被禁用，控制台报net::ERR_FILE_NOT_FOUND -
<script type="module"></script>被静默忽略，连错误都不抛，JS 逻辑完全失效 - 右键菜单里没有
Open with Live Preview？大概率是文件未保存、路径含中文/空格，或语言模式被误设为 Plain Text
Live Server 才是 CSS 实时预览的正确打开方式
它启动一个真实的本地 HTTP 服务（默认 http://127.0.0.1:5500），完整支持浏览器网络能力与模块加载：
- 右键 HTML 文件 →
Open with Live Server，或点状态栏Go Live按钮 - 保存任意关联文件（
index.html、style.css、app.js）都会触发浏览器自动刷新 - CSS 修改后即使没刷新，也可用浏览器开发者工具（F12）实时编辑
<style></style>或元素样式，所见即所得 - 支持
fetch('./data.json')、import语句、相对路径引用（只要路径相对于项目根目录正确）
常见样式不生效的三个硬性条件
即使装了 Live Server，CSS 仍不更新，先检查这三点：
- HTML 文件必须已保存（标题栏不能带
*），且位于一个**有明确根目录的文件夹中** —— 单独拖一个index.html到 VS Code 空窗口，Live Server 不会工作 - CSS 文件路径写错：
href="css/style.css"要求项目根目录下存在css/子目录；若实际在同级，应写href="style.css" - 浏览器缓存干扰：按
Ctrl+Shift+R强制硬刷新，或在开发者工具 Network 面板勾选Disable cache
进阶：自定义端口与根目录避免冲突
如果 5500 端口被占用，或你希望把 src/ 当作服务器根目录（而非整个工作区），需手动配置：
- 打开 VS Code 设置（
Ctrl+,），搜索liveServer.settings.port，改为例如8080 - 搜索
liveServer.settings.root，设为"./src"（注意引号和点斜杠） - 配置项最终会写入
settings.json，形如：{"liveServer.settings.port": 8080, "liveServer.settings.root": "./src"}
改完后重启 Live Server（先点一次 Go Live 关闭，再点开启），新配置才生效。别忽略这一步 —— 很多人改了设置但没重启服务，以为插件坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
