VSCode的Live Preview与Live Server有什么区别？

Live Preview 是 vscode 内嵌式 html 渲染工具，不启服务器，适合静态结构快速预览；Live Server 是本地 http 服务器，支持完整 Web API 和自动刷新，适用于正式前端开发调试。

Live Preview 和 Live Server 都是 VSCode 里用来预览 HTML 页面的插件，但定位、实现方式和适用场景明显不同。

Live Preview 是微软官方的内嵌式实时渲染

它不启动本地服务器，而是直接在 VSCode 编辑器内部解析并渲染 HTML（类似 markdown 预览）。右上角会出现一个“预览”按钮，点一下就弹出内嵌视图窗口。支持基本的 css 和 js 执行，但无法加载跨域资源、ajax 请求或依赖后端接口的内容。适合快速查看静态结构、组件片段或文档类页面。

Live Server 是第三方热重载开发服务器

它会在本地起一个 HTTP 服务（默认端口 5500），把当前项目当作 Web 根目录托管。浏览器访问的是真实 http://127.0.0.1:5500/xxx.html，因此能正常加载相对路径的图片、CSS、JS，也支持 fetch、localStorage、websocket 等完整 Web API。每次保存文件，它会自动刷新浏览器——这才是真正意义上的“开发调试环境”。

捏Ta

捏Ta 是一个专注于角色故事智能创作的AI漫画生成平台

322

查看详情

关键区别一目了然

• 运行机制：Live Preview 是编辑器内渲染；Live Server 是真实 HTTP 服务 + 浏览器刷新
• 网络能力：Live Preview 无法发请求、不支持 CORS 场景；Live Server 完全兼容标准 Web 行为
• 路径处理：Live Preview 对相对路径（如 ./css/style.css）容易报 404；Live Server 按照服务器根目录解析，更可靠
• 适用阶段：Live Preview 适合写完一段 HTML 立刻瞄一眼效果；Live Server 适合整个前端项目迭代开发

基本上就这些。日常可以两个都装：用 Live Preview 快速扫一眼结构，用 Live Server 做正式调试。不复杂但容易忽略——选错工具，有时候连一张图片都出不来。