vscode本身不运行html，必须用live server插件启动本地http服务（如http://127.0.0.1:5500）绕过file://协议限制；双击、右键“在浏览器中打开”等均走file://，导致fetch、模块导入、相对路径等功能全部失效。
VSCode 本身不运行 HTML，它只是编辑器；所谓“运行”，本质是让浏览器以 HTTP 协议加载页面——file:// 路径下几乎所有现代 JS 功能都会失效，这不是你代码写错了，是浏览器策略卡死的。
必须用 Live Server 启动本地 HTTP 服务
双击打开、右键“在默认浏览器中打开”、甚至 Open in Browser 插件，全走 file:// 协议。只要页面里有以下任一情况，必然报错：
-
fetch('./data.json')→ 控制台显示Not allowed to load local resource -
<script type="module"></script>→ 报Failed to load module script -
../config/main.js或./api/user→ 404，路径解析完全错乱 -
localStorage、Service Worker、WebSockets→ 全部禁用
Live Server（作者 ritwickdey）起的是真实 http://127.0.0.1:5500 服务，绕过所有限制。安装后必须：
- 用 “打开文件夹” 方式加载整个项目（不是单独拖一个
index.html） - 右键已保存的
.html文件 →Open with Live Server - 或点 VSCode 底部状态栏的
Go Live按钮（仅当前编辑器打开并保存了.html时才亮起）
端口被占或想换浏览器？手动干预很简单
默认端口 5500 被其他程序（如另一个 Live Server、Python server、Docker 容器）占了，VSCode 不会报错，而是静默 fallback 到 5501，但你可能没注意到地址栏变了。更稳的做法是：
- 点击右下角状态栏显示的端口号（如
5500）→ 选Change Port→ 输入新数字（比如3000或8080） - 改完后，浏览器会自动跳转到新地址；如果没跳，手动刷新或重开标签页
- 想固定用 Chrome 而非系统默认浏览器：在
settings.json加一行"liveServer.settings.CustomBrowser": "chrome"
注意：CustomBrowser 值必须是小写、无空格、与系统可执行名一致（Windows 是 chrome，macOS 是 google chrome，Linux 是 chromium 等）。
为什么改了代码浏览器却不刷新？先盯住这三处
Live Server 不是“装了就自动生效”的魔法，常见假性失效其实是配置或操作断点：
- 浏览器地址栏仍是
file:///开头 → 说明根本没触发 Live Server，检查是否右键点错了（点了“Open in Default Browser”而非“Open with Live Server”） - VSCode 右下角没有
Live Server运行提示（带绿色圆点），也没有端口号 → 服务压根没启动，确认文件已保存、且扩展已启用 - 刷新后看到旧 CSS/JS → 浏览器缓存，不是 Live Server 问题；按
Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（macOS）强制硬刷新
相对路径失效（比如 href="../css/style.css" 404）往往是因为你把 index.html 放在子目录里，而 Live Server 默认以该 HTML 文件所在目录为根路径，不是工作区根目录——这是设计行为，不是 bug。
最易被忽略的一点：Live Server 只监听文件变更并刷新页面，它不编译、不打包、不处理 .vue / .svelte / .ts，也不支持热模块替换（HMR）。如果你项目里用了 Vite、Webpack 或任何构建工具，就该关掉 Live Server，直接跑 npm run dev ——两个服务共用端口会冲突，且功能重叠毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
