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">→ 报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按钮（仅当上述条件都满足时才出现）
启动后地址形如 <a href="https://www.php.cn/link/7a57c8365d08d6e59766f52df5d95881">https://www.php.cn/link/7a57c8365d08d6e59766f52df5d95881</a>，这才是真正的 Web 运行环境。
端口冲突、根目录不对、手机访问不了怎么办？
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 调试配置找的是 <a href="https://www.php.cn/link/cbb686245ece57c9827c4bc0d0654a8e">https://www.php.cn/link/cbb686245ece57c9827c4bc0d0654a8e</a>，而 Live Server 启的是 <a href="https://www.php.cn/link/e6bebc499c445570ecbe7829ae23b881">https://www.php.cn/link/e6bebc499c445570ecbe7829ae23b881</a>。不改就断连，调试器进不去。
最小可用配置只改三项：
-
"url"→ 改成"<a href="https://www.php.cn/link/7a57c8365d08d6e59766f52df5d95881">https://www.php.cn/link/7a57c8365d08d6e59766f52df5d95881</a>" -
"webRoot"→ 保持"${workspaceFolder}" - 删掉
"file"字段（它和url冲突，旧教程常误留）
真实问题往往藏在路径基准和协议差异里，不是功能坏了，是你没站在 HTTP 的世界里写代码。
