VSCode需借助Live Server插件或Vite实现保存即刷新：Live Server适用于纯静态页，起HTTP服务解决file://限制；Vite适用于含import、JSX等的前端项目，支持HMR。
VSCode 本身不内置浏览器实时预览功能，但通过轻量组合就能实现「保存即刷新」——关键不是装一堆插件，而是选对工具链。
Live Server 插件是最直接的方案
它起一个本地 HTTP 服务（非 file:// 协议），解决跨域、模块加载、相对路径等常见问题。安装后右键 HTML 文件选择 Open with Live Server，会自动在默认浏览器打开 http://127.0.0.1:5500/xxx.html，且保存文件时自动刷新。
- 默认端口是
5500，可在 VSCode 设置中搜索liveServer.settings.port修改 - 不支持热模块替换（HMR），只刷新整个页面；适合静态页、原型、小项目
- 如果项目含
index.html，建议放在根目录，否则需手动右键打开具体文件 - 禁用其他类似插件（如
open-in-browser），避免端口冲突或重复打开
需要 HMR 或构建流程？用 Vite 启动开发服务器
前端项目一旦涉及 import、jsx、css modules 或 TypeScript，Live Server 就失效了。此时应切换到真实开发服务器。
- 在项目根目录运行
npm create vite@latest（已有项目可跳过） - 确保已安装依赖：
npm install - 启动命令是
npm run dev，默认地址为http://127.0.0.1:5173/ - VSCode 只负责编辑，浏览器访问由 Vite 控制；保存即 HMR，响应更快，错误也直接显示在终端和浏览器控制台
- 注意：Vite 不会自动打开浏览器，首次需手动访问；可配
vite.config.ts的server.open为true
遇到“无法加载资源”或“404”先查协议和路径
90% 的预览失败源于误用 file:// 协议打开 HTML —— 浏览器会拦截 fetch、禁止 import、解析错 ./assets/logo.png。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器地址栏：必须是
http://或https://开头，绝不能是file:/// - 静态资源路径尽量用相对路径（如
./css/main.css），避免/css/main.css（从根开始找，易出错） - Live Server 默认以当前文件所在目录为服务根目录；若 HTML 在
src/下，它就只提供src/下的文件 - Vite 中 public 目录下的文件（如
public/favicon.ico）可通过/favicon.ico访问，无需加src/
真正卡住的地方往往不是“怎么开”，而是没意识到 file:// 和 http:// 的行为差异，或者混淆了静态服务与构建工具的职责边界。选 Live Server 还是 Vite，取决于你是否写了 import、用了 JSX、需要 CSS 预处理——而不是“哪个更高级”。
