live server 页面空白或404主因是工作区未以文件夹打开、入口文件非index.html或资源路径错误；需通过“文件→打开文件夹”加载项目根目录，右键index.html选“open with live server”，确保路径全英文且css/js文件真实存在。
Live Server 插件能实现 HTML/CSS/JS 的自动刷新，但它不是热更新（HMR）；真要保留状态、局部替换 CSS 或 JS，得换 Vite 或 Webpack。
Live Server 启动后页面空白或 404 怎么办
这不是插件坏了，而是服务根本没找到入口文件或工作区不对。
- 必须通过“文件 → 打开文件夹”加载整个项目，单个
index.html文件拖进 VS Code 不生效 - 右键编辑器标签页里的
index.html→ 选Open with Live Server，比点状态栏Go Live更可靠 - 主文件叫
home.html？浏览器手动访问http://127.0.0.1:5500/home.html，它不会自动猜 - 路径含中文或空格？改用英文命名，旧版
Live Server对非 ASCII 路径支持不稳定
改了 CSS/JS 但浏览器不刷新的常见原因
Live Server 默认只监听 .html、.htm、.xhtml、.php 等后缀，对 .css 和 .js 文件的修改默认不触发整页刷新（部分版本支持 CSS 热重载，但不可靠）。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 确认浏览器地址栏是
http://开头，不是file:///—— 后者禁用模块加载、fetch 和相对路径解析 - 检查
index.html中引用路径是否拼错：<link rel="stylesheet" href="css/style.css">要求磁盘上真实存在./css/style.css - Chrome 开发者工具 → Network 标签页 → 勾选
Disable cache（仅 DevTools 打开时生效） - VS Code 右上角若弹出
Reloading CSS…提示，说明 Live Server 已响应，问题在浏览器缓存或路径
需要真正热更新（HMR）时该用什么
Live Server 做不到状态保留、路由不跳转、CSS 局部注入——这些是 HMR 的能力，必须依赖构建工具。
- 新项目：运行
npm create vite@latest，选框架后npm install && npm run dev，默认地址http://127.0.0.1:5173/ - 已有项目含
import、JSX、TypeScript 或 CSS 预处理器？直接关掉 Live Server，用npm run dev启动原生开发服务器 - Vite 的 HMR 响应更快，错误直接打在终端和浏览器控制台；Live Server 刷新慢、不报错、JS 状态全丢
- 注意：Vite 不会自动打开浏览器，首次需手动访问；可在
vite.config.ts中设server.open: true
真正卡住的往往不是“怎么配”，而是混淆了静态服务与构建工具的职责：Live Server 解决的是 file:// 协议限制，Vite 解决的是模块化开发流程。选哪个，取决于你写了 import 没有，而不是“哪个更高级”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
