live server插件无法启动的根本原因是未在工作区中打开已保存的.html文件：必须通过“文件→打开文件夹”建立工作区，确保右下角显示go live按钮，且仅对已保存的.html文件生效；双击单文件或未保存文件均不触发服务。
Live Server 插件不能靠双击单个 HTML 文件启动，必须在工作区（文件夹）中打开已保存的 .html 文件，并通过它起 HTTP 服务，否则所有现代 Web 功能（fetch、import、相对路径资源加载）都会失败。
为什么点“Go Live”没反应或右键没有 Open with Live Server
根本不是插件坏了，而是 VS Code 没识别出可服务的上下文：
- 你没通过 文件 → 打开文件夹（或拖整个文件夹进 VS Code），只是双击打开了一个孤立的
index.html—— Live Server 不会响应这种场景 - 当前编辑器标签页是未保存的临时文件（标题栏带 * 号），或者扩展名不是
.html（比如.htm或无后缀） - 右下角状态栏没出现
Go Live按钮，说明插件未激活：尝试禁用再启用一次，或按Ctrl+Shift+P输入Live Server: Start看是否报错 - 项目里有多个 HTML，但你没打开任意一个作为活动标签页 —— Live Server 默认只服务当前激活的
.html文件
为什么浏览器地址是 file:/// 而不是 http://127.0.0.1:5500/
你根本没走 Live Server 的服务流程，而是用了系统默认打开方式（比如右键 → “在浏览器中打开” 或拖文件到浏览器窗口），这走的是 file:// 协议：
-
file://下fetch('./data.json')必报net::ERR_FILE_NOT_FOUND或 CORS 错误 -
script type="module"会静默失败，控制台甚至不报错 - 相对路径如
./css/style.css在某些浏览器版本里会 404，尤其跨目录时 - 正确做法：确保地址栏显示的是
http://127.0.0.1:5500/xxx.html，且右下角状态栏有端口号提示
修改 CSS/JS 后页面不刷新，但 HTML 改了就刷
Live Server 默认只监听当前 HTML 文件所在目录及其子目录的变更，对跨目录引用的资源（比如 HTML 在根目录，CSS 在 dist/css/）可能漏监听：
- 先确认资源路径能被浏览器正常加载：打开开发者工具的
Network面板，看有没有 404 - CSS/JS 文件修改后不刷新，大概率是路径写错了，不是 Live Server 失效；改完 HTML 本身一定触发整页 reload
- Live Server 不支持热模块替换（HMR），它只做
location.reload()，不是 React/Vue 那种局部更新 - 如果用了 Webpack/Vite 等构建工具，别同时开 Live Server —— 端口冲突 + 热更机制打架，会导致白屏或 404
子目录 HTML 如何正确预览且资源不 404
关键不是改插件设置，而是统一资源解析基准：
- 推荐做法：在 VS Code 中打开整个项目文件夹，再打开
src/pages/about.html并右键Open with Live Server—— 它会以该文件夹为根，访问地址变成http://127.0.0.1:5500/src/pages/about.html - 此时所有相对路径（如
../css/style.css）按项目根目录解析，只要结构匹配就不会 404 - 若坚持从子目录启动，把资源路径写成根相对路径：
<link rel="stylesheet" href="/css/style.css">（注意开头的/） - 避免改
liveServer.settings.root，容易和实际文件结构错位，调试成本陡增
最常被忽略的一点：Live Server 的自动刷新依赖操作系统文件监听 API，某些杀毒软件（尤其是 Windows Defender 实时保护）或公司级防火墙会拦截，导致改了文件但浏览器完全没反应 —— 不是插件问题，是系统层限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
