Live Server插件通过本地HTTP服务实现HTML实时预览，支持保存即刷新，避免file://协议导致的跨域、模块导入失败等问题；推荐优先使用，替代方案包括Python或Node.js简易服务器。

用 Live Server 插件实时预览 HTML

VS Code 本身不带浏览器渲染功能，必须借助插件或外部工具打开 HTML 文件才能看到效果。最常用、最稳的方式是安装 Live Server 插件——它起一个本地 HTTP 服务，自动在默认浏览器中打开页面，并支持保存即刷新。

• 安装后右键点击 HTML 文件 → 选择 Open with Live Server，就会自动打开 http://127.0.0.1:5500/xxx.html
• 改完代码按 Ctrl+S（Windows/Linux）或 Cmd+S（macOS），页面会自动刷新，无需手动切换标签页
• 注意：不能直接双击 HTML 文件用 file:// 协议打开——某些功能（如 fetch、模块导入、相对路径资源）会因跨域或协议限制失效
• 如果项目有 index.html，Live Server 默认优先打开它；否则会打开当前活动文件

为什么不用“直接在浏览器中打开”？

双击 HTML 文件，浏览器地址栏显示的是 file:///.../index.html，这种 file:// 协议下，现代浏览器出于安全策略，会禁用很多 Web API：

• XMLHttpRequest 和 fetch 请求本地 JSON 文件会报 CORS error 或 net::ERR_FILE_NOT_FOUND
• import ES 模块会触发 Failed to load module script
• 某些 CSS 路径（尤其是 ../ 回退）在 file:// 下解析异常，但走 http:// 就正常
• 开发 Vue/React/Vite 等前端框架时，完全无法启动

替代方案：命令行起简易服务器

没装插件，或想脱离 VS Code 环境验证时，可以用系统自带的命令快速起服务：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• Python 3 用户：终端进入 HTML 所在目录，运行 python3 -m http.server 8000，然后访问 http://localhost:8000
• Node.js 用户：全局安装 http-server（npm install -g http-server），再运行 http-server -p 8080
• 注意端口冲突：如果 5500/8000/8080 已被占用，换一个数字即可，比如 -p 3000

常见坑：改了 HTML 却没刷新？

不是所有“刷新”都等于重载最新代码。以下情况会导致你看到的还是旧页面：

立即学习“前端免费学习笔记（深入）”；

• 浏览器缓存了 HTML 或 JS/CSS——强制刷新（Ctrl+Shift+R 或 Cmd+Shift+R）可绕过缓存
• Live Server 没真正监听到文件变化（尤其在 WSL 或网络盘路径下）——把项目移到本地 NTFS/macOS APFS 分区再试
• HTML 中引用了绝对路径资源（如 /css/style.css），而服务根目录不对——检查浏览器开发者工具的 Network 标签页，看哪些请求 404
• VS Code 的文件没真正保存（右下角状态栏显示“未保存”），或者用了自动保存但延迟未触发

有些路径问题只在 http:// 下暴露，file:// 反而“碰巧”能跑——别被它骗了。