必须用Live Server；Live Preview仅适合纯静态结构校验，不支持JS执行、fetch请求及相对路径资源加载。
Live Server 和 Live Preview 到底该用哪个
直接说结论：要真正运行 JS、加载本地 CSS、发起 fetch 请求，必须用 Live Server；如果只是静态 HTML 结构检查、不想起服务、图个快，Live Preview 可以凑合用，但限制极多。
Live Preview 不起 HTTP 服务，走的是 vscode-file:// 协议，浏览器会拦截跨域请求、拒绝 type="module" 脚本、报 404 找不到同目录的 style.css 或 app.js——这不是你写错了，是它压根不模拟真实环境。
-
Live Server启动的是真实本地 HTTP 服务（默认端口5500），所有相对路径、AJAX、ESM 模块都按标准浏览器行为工作 -
Live Preview只适合纯结构校验：比如检查<div> 嵌套是否闭合、标签语义是否合理、内联样式是否生效 <li>如果你右键没看到 <code>Open with Live Server，大概率是文件没保存，或没在文件夹里打开（单独拖一个index.html进 VS Code 是无效的） - 文件必须已保存——标题栏不能带星号
*，未保存的临时文件不被识别 - 项目必须以文件夹形式打开：把整个文件夹拖进 VS Code，而不是只拖一个
.html文件 - 路径不能含中文或空格：比如
D:\前端练习\demo.html或C:\my project\index.html都会导致静默失败；换成D:\fe-demo\index.html就行 - 假设项目结构是：
/project/index.html和/project/css/style.css，那么index.html中应写<link rel="stylesheet" href="css/style.css">，不是./css/style.css或../css/style.css -
<script type="module" src="main.js"></script>要求main.js必须和 HTML 在同一级，且服务器支持 MIME 类型；若不行，先改回<script src="main.js"></script> - 如果用了
fetch('/api/data.json')，确保/project/api/data.json存在；Live Server 不代理后端，它只 serve 静态文件 - 换端口：加一行
"liveServer.settings.port": 3000 - 禁用自动开浏览器：加
"liveServer.settings.open": false - 指定 Chrome 路径（Windows）：
"liveServer.settings.CustomBrowser": "chrome"；macOS 可设为"google chrome" - 设项目根目录（比如 HTML 在子目录）：
"liveServer.settings.root": "/src"，这样访问http://127.0.0.1:5500/就等于打开/src/index.html
Live Server 右键菜单不出现？先查这三件事
常见现象：装完插件，重启了 VS Code，状态栏也没“Go Live”按钮，右键菜单空空如也。
Live Server 启动后 JS 不执行、CSS 404 怎么办
不是插件坏了，是你引用路径写错了。Live Server 的根目录是项目文件夹，不是 HTML 文件所在目录。
立即学习“前端免费学习笔记（深入）”；
端口被占、想换浏览器、自动打开关掉怎么配
这些都在 settings.json 里改，不用点界面设置：
最容易被忽略的一点：改完 settings.json 不用重启 VS Code，但必须重新点击 Go Live 才生效——旧服务不会热更新配置。
