Live Server是唯一能真正运行HTML并呈现完整网页效果的方案，因其通过http://协议启动本地服务器，规避file://协议对fetch、模块导入、Storage等Web标准功能的限制；必须安装原版插件、打开文件夹工作区、且编辑已保存的.html文件才能启用。
Live Server 是唯一能真正运行 HTML 并看到完整网页效果的方案，其他方式只是“打开文件”，不是“运行”。
为什么双击或右键“在浏览器中打开”不算运行？
浏览器对 file:// 协议做了硬性限制：
-
fetch('./data.json')→ 控制台报net::ERR_FILE_NOT_FOUND或CORS error -
<script type="module"></script>→ 报Failed to load module script -
localStorage、Service Worker、import.meta.url全部不可用 - 相对路径如
../css/main.css在部分浏览器下解析失败（尤其含中文/空格路径时）
这不是你代码写错了，是协议本身不支持 Web 标准行为。
怎么正确用 Live Server 启动 HTTP 服务？
必须满足三个前提，缺一不可：
- 安装 Ritwick Dey 原版插件（扩展 ID：
ritwickdey.LiveServer，别选作者不明的“精简版”） - 通过
文件 → 打开文件夹加载整个项目目录（单个 .html 文件拖入 VSCode 不生效） - 当前编辑器标签页已打开并保存了某个 .html 文件（未保存时右键无
Open with Live Server）
操作路径只有两条：
- 右键编辑器中的 HTML 文件 → 选择
Open with Live Server - 或点击 VSCode 窗口右下角状态栏的
Go Live按钮（仅当上述条件都满足时才出现）
启动后地址形如 @#@#@#@#@#@#@#@#@#@0，这才是真正的 Web 运行环境。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
端口冲突、根目录不对、手机访问不了怎么办？
Live Server 默认端口是 5500，但被占时不会报错，只会静默换端口（状态栏右下角数字会变）。主动配置更可靠：
- 打开 VSCode 设置（
Ctrl+,），搜liveServer.settings.port→ 改成3000等常用端口 - 想让手机连同一 Wi-Fi 访问 → 设
liveServer.settings.host为0.0.0.0 - 项目入口不在根目录（比如 HTML 在
src/下）→ 设liveServer.settings.root为"./src"
注意：所有路径配置都是相对于工作区根目录，不是相对于当前文件。
调试 JS 时 launch.json 必须改这三处
VSCode 默认的 Chrome 调试配置找的是 @#@#@#@#@#@#@#@#@#@1，而 Live Server 启的是 @#@#@#@#@#@#@#@#@#@2。不改就断连，调试器进不去。
最小可用配置只改三项：
-
"url"→ 改成"@#@#@#@#@#@#@#@#@#@0" -
"webRoot"→ 保持"${workspaceFolder}" - 删掉
"file"字段（它和url冲突，旧教程常误留）
真实问题往往藏在路径基准和协议差异里，不是功能坏了，是你没站在 HTTP 的世界里写代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
