直接双击html文件走file://协议，受限于浏览器安全策略，禁用fetch、localstorage等api及cors；live server启动http服务器（如https://www.php.cn/link/e6bebc499c445570ecbe7829ae23b881），绕过限制，提供真实开发环境。
为什么直接双击 HTML 文件不行，而 Live Server 可以？
浏览器用 file:// 协议打开本地 HTML 时，会禁用许多 Web API（如 fetch、localStorage 在部分浏览器中受限）、跨域请求、Service Worker，甚至某些 CSS 模块功能。Live Server 启动的是一个真正的本地 HTTP 服务器（默认地址 @#@#@#@#@#@#@#@#@#@0），让文件走 http:// 协议，绕过这些限制。
- 不是“预览”，而是真实开发环境下的运行
- 端口
5500可被占用，此时 Live Server 会自动尝试5501，但若你依赖固定端口（比如配置了代理或测试脚本），需手动改配置 - 如果项目含图片、JSON、API 调用等静态资源引用，必须通过 HTTP 服务访问，否则 404 或 CORS 错误
安装 Live Server 后右键没出现 “Open with Live Server”？
这很常见，根本原因不是插件没装好，而是触发位置错了：
- ✅ 正确操作：在已打开的 HTML 文件编辑器标签页内右键（即你正看着代码的窗口里）
- ❌ 错误操作：在左侧“资源管理器（Explorer）”面板中对文件名右键 —— 这里不会显示该选项
- 若仍不出现，检查是否打开了多个工作区，当前编辑器是否属于某个已信任的文件夹（VS Code 会拒绝未信任文件夹中的扩展功能）
- 极少数情况：插件安装后未重启 VS Code（虽然新版大多免重启，但旧版或企业策略下可能需要）
状态栏 “Go Live” 按钮点了没反应？
这个绿色按钮只在以下条件同时满足时才激活：
当前打开的编辑器是一个
.html文件（不是.txt或未保存的 Untitled-1）该文件已保存到磁盘（有实际路径，不是临时缓冲区）
文件所在目录是 VS Code 的“工作区根目录”或其子目录（单独拖一个 HTML 文件进 VS Code，不构成工作区，按钮灰显）
可快速验证：按
Ctrl+Shift+P打开命令面板，输入Live Server: Open with Live Server，回车执行 —— 若能启动，说明插件正常，只是右键/按钮触发条件未满足若提示
Cannot find module 'http'或类似 Node.js 错误，说明 VS Code 内置 Node 版本异常，可尝试在设置中关闭liveServer.settings.CustomBrowser或重装插件
修改代码后浏览器没自动刷新？
Live Server 的热重载（Hot Reload）默认只监听 .html、.css、.js 文件保存事件，但有几个关键细节常被忽略：
- 自动刷新只发生在浏览器通过 Live Server 地址打开（即
@#@#@#@#@#@#@#@#@#@1），而不是你手动输file:///D:/xxx.html - 若你用的是 iframe、
window.open()或第三方调试工具打开页面，它们不注入 Live Server 的客户端脚本，自然不刷新 - CSS 修改有时因浏览器缓存延迟生效，可尝试在开发者工具 Network 面板勾选
Disable cache - 某些构建工具（如 Vite、Webpack）或框架（Vue/React）有自己的 dev server，和 Live Server 冲突，不要混用
Live Server 是轻量级 HTML/CSS/JS 原生开发的事实标准，但它不是万能的——它不处理模块解析、打包、TypeScript 编译或 SSR。一旦项目结构变复杂（比如引入 import 语句、ESM 模块、npm 包），就得切换到对应框架的官方开发服务器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
