live server 插件通过启动本地 http 服务（如 http://127.0.0.1:5500）绕过 file:// 协议限制，确保相对路径、fetch()、es 模块等正常运行，而“open in browser”直接打开本地文件导致 cors 错误、资源加载失败及无热重载。
直接用 Live Server 插件，别试“Open in Browser”——后者走 file:// 协议，JS/CSS/图片路径和 fetch() 全都容易挂。
为什么不能右键选“Open in Default Browser”
这个命令只是让系统用默认浏览器打开本地文件路径，比如 file:///Users/xxx/index.html。它不启动任何服务器，所以：
- 相对路径（如
./css/style.css）在某些浏览器里会加载失败 -
fetch('./data.json')直接触发 CORS 错误，报Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin - ES 模块（
import语句）在 Chrome 等浏览器中会被拒绝执行 - 没有热重载，改完必须手动刷新，且可能因缓存看到旧内容
Live Server 是怎么工作的
它在本地起一个 HTTP 服务（默认是 http://127.0.0.1:5500），所有请求都走 http:// 协议，绕过浏览器对 file:// 的限制。关键点：
- 安装插件后，右键编辑器任意位置 → 选
Open with Live Server（不是右键侧边栏文件名） - 确保当前文件语言模式是 HTML：看 VS Code 右下角，如果是
Plain Text或JavaScript，点它 → 选HTML - 文件必须已保存，且扩展名是
.html或.htm；未保存的Untitled-1标签无法启动 - 浏览器地址栏显示的是
http://127.0.0.1:5500/xxx.html，不是file://—— 这是正常且必需的
常见问题和对应操作
遇到页面空白、404、改了不刷新？先查这几项：
- 检查路径：如果 HTML 在子目录（如
pages/about.html），./style.css会请求http://127.0.0.1:5500/pages/style.css，不是项目根目录。改用/css/style.css（开头带/）才能从服务根找 - 确认保存真实写入：VS Code 右下角状态栏若显示「正在保存」或有转圈图标，说明磁盘还没落盘，Live Server 不会触发刷新
- 禁用浏览器缓存调试：DevTools → Network 标签页 → 勾选
Disable cache；或者按Ctrl+F5强制硬刷新 - 端口被占时它会自动换（如
:5501），不用手动干预；但若想固定端口，需在settings.json里加："liveServer.settings.port": 8080
Live Server 的核心价值不在“能打开”，而在“能可靠运行现代前端代码”。哪怕只写一个 HTML 文件，只要用了相对资源、JS 模块或本地 API 调用，file:// 就是伪预览——真正的预览必须走 HTTP。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
