必须用 live server 启动 http 服务，因 file:// 协议被浏览器严格限制导致 fetch/import/跳转等全部失败；安装后需先在编辑器中打开 html 文件，右键选择 open with live server 或点击状态栏 go live 按钮。
直接双击或右键用浏览器打开 HTML 文件，一定会触发浏览器安全策略拦截——这不是你代码的问题，是 file:// 协议本身被现代浏览器严格限制所致。
为什么 file:// 协议下 fetch/import/跳转全失败
Chrome、Edge、Firefox 都把 file:// 视为 origin null，而 null 源被禁止发起任何受控请求：
- fetch('./data.json') 报 net::ERR_FILE_PROTOCOL 或 CORS error
- <script type="module">import './main.js'</script> 报 Failed to resolve module specifier
- 点击 <a href="about.html"></a> 跳转后空白页，控制台无报错但页面不渲染
- 连 localStorage.setItem 在部分 Edge 版本中也会静默失效
这些不是 bug，是浏览器主动拒绝执行，且无法通过设置绕过。
必须用 Live Server 启动 HTTP 服务
Live Server 插件（作者 Ritwick Dey）是目前最轻量、最贴合 VS Code 工作流的方案，它启动的是真实 http://127.0.0.1:5500 服务，所有相对路径、跨页跳转、ESM、fetch 都能正常工作。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 安装插件后，**必须先在编辑器中打开一个
.html文件**（不是只在资源管理器里点文件），右键才出现Open with Live Server - 状态栏右下角会显示
Go Live按钮，点击也等效；若没出现，重启 VS Code 或重装插件 - 默认端口是
5500，若被占用会自动换端口（如5501），但某些防火墙会拦截非标准端口，建议在设置中固定：liveServer.settings.port设为3000或8080 - 项目结构含子目录（如
/src/index.html）时，需配置liveServer.settings.root为"./src"，否则路径解析会 404
常见误操作和对应现象
很多人以为“装了插件就万事大吉”，结果还是白屏或报错，问题往往出在启动姿势不对：
- 从资源管理器右键整个文件夹 → 选“Open with Live Server” → 实际没生效（插件只响应单个已打开的 HTML 文件）
- VS Code 没通过
File → Open Folder打开项目根目录 → Live Server 默认根路径错乱，./css/style.css找不到 - 路径写成
file:///C:/my-site/about.html→ 地址栏看到这个，说明根本没走 Live Server，立刻检查右键位置和文件是否在编辑器标签页中 - HTML 中用了绝对路径如
/js/main.js或硬编码端口http://localhost:5500/js/main.js→ Live Server 不支持，必须用相对路径js/main.js
别碰其他“看起来更简单”的方案
以下方式看似省事，实际更容易踩坑：
-
python -m http.server 8000：默认不支持 CORS，SPA 路由刷新 404，且不监听0.0.0.0，手机无法访问 -
npx serve -s：适合构建后产物，但对纯 HTML 项目多此一举，且无自动刷新 - VS Code 自带的
Open in Browser插件：本质仍是file://，所有安全限制照旧 - 手动改
launch.json调试配置：除非你明确需要断点调试 JS，否则纯属增加复杂度，且极易配错 host/port 导致连不上
Live Server 的核心价值，是把「让浏览器跑起来」这件事压缩到一次右键。真正容易被忽略的，是它对项目结构和启动上下文的强依赖——不是插件有问题，是你没把它放在它能工作的上下文中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
