Live Server插件是VSCode中运行HTML的首选方案,因其启动http://本地服务器(如127.0.0.1:5500)绕过file://协议限制,支持fetch、ES模块导入和相对路径;必须打开.html文件后右键选择“Open with Live Server”或点击状态栏“Go Live”按钮。

VSCode 本身不“运行” HTML,它只编辑文件;真正渲染 HTML 的是浏览器。你实际要解决的,是「怎么让浏览器快速、正确地加载并执行你写的 HTML」——关键在协议(file:// 还是 http://)和加载方式。
Live Server 插件:适合开发调试,绕过 file:// 限制
这是绝大多数前端开发者默认选择,不是因为它“高级”,而是它解决了真实问题:JS 的 fetch、ES 模块导入、相对路径资源加载,在 file:// 下全会失败,报错类似 net::ERR_FILE_PROTOCOL 或 CORS error。
- 必须先在编辑器中打开一个
.html文件,右键才有Open with Live Server选项(在资源管理器里右键无效) - 默认端口是
5500,被占用时会自动换端口,但建议提前在设置里搜liveServer.settings.port固定为3000或8080,避免后续调试工具(如launch.json)地址不匹配 - 如果项目结构是
src/index.html,但你想以/为根访问,需设liveServer.settings.root为"./src" - 状态栏右下角的
Go Live按钮,只对当前激活的 HTML 编辑器生效,切到其他标签页就变灰
直接用系统浏览器打开:适合纯静态页面快速验证
不用装插件、不启服务、不配端口,双击或右键“用 Chrome 打开”就行。但它本质走的是 file:// 协议,所有浏览器沙箱规则照常生效。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 路径含中文或空格时,某些旧版浏览器(尤其是 Edge 默认配置)可能静默禁用 JS,换成 Chrome 或 Firefox 更稳
- 修改代码后必须手动刷新,且容易因缓存看不到更新——可按
Ctrl+F5强制重载,或在 DevTools 的 Network 面板勾选 “Disable cache” - 如果用
fetch("./data.json")加载同目录 JSON,必然失败;改用http://地址(比如 Live Server 启的)才能跑通 - 别信“右键 → Open in Default Browser”——这个功能需要额外插件(如 Open in Browser),VSCode 原生不支持
真正容易被忽略的点是:你以为在“运行 HTML”,其实是在选择加载上下文。Live Server 给你一个最小可用的 HTTP 环境;双击打开只是让浏览器读本地文件——两者能力边界非常清晰,混用就会卡在莫名其妙的报错里。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










