必须用 http 服务器启动，否则多页面跳转必然失败；因 file:// 协议被浏览器安全策略限制，无法跨文件加载资源或跳转，唯一解法是使用 live server 等本地 http 服务。
必须用 HTTP 服务器启动，否则多页面跳转必然失败——这不是代码问题，是浏览器直接拦的。
为什么点击链接后页面空白或报 net::ERR_FILE_PROTOCOL
双击 HTML 文件或用 file:// 协议打开时，浏览器禁止跨文件跳转、fetch('./data.json')、import 模块等行为。即使 about.html 和 index.html 在同一目录，点击链接也会触发安全策略拦截。
- 错误现象：控制台出现
Not allowed to load local resource或Failed to resolve module specifier - 本质原因：
file://不是 HTTP 协议，没有 Origin，不支持相对路径资源解析 - 唯一解法：用本地 HTTP 服务（如
http://127.0.0.1:5500/）运行整个项目根目录
Live Server 是最简可靠的启动方式
它不依赖 Node.js，安装即用，自动监听并刷新，且默认以当前 VSCode 打开的文件夹为根目录，天然适配多页面结构。
- 安装后右键任意 HTML 文件 → 选择
Open with Live Server（不是“Open in Default Browser”） - 首次运行会打开浏览器，地址形如
http://127.0.0.1:5500/index.html，所有页面内链接必须用相对路径：@#@#@#@#@#@#@#@#@#@0 - 右下角状态栏会出现
Go Live和端口号（如5500），点它可快速切换端口或停止服务 - 若右键无该选项，说明未在 HTML 文件编辑器中激活（需先打开并聚焦该文件）
多页面项目结构与路径写法要点
Live Server 的根路径 = VSCode 当前打开的文件夹（即你通过 File → Open Folder 打开的路径），所有链接和资源引用都以此为基准。
- 推荐结构：
/my-site ├── index.html ├── about.html ├── contact.html ├── css/style.css ├── js/main.js └── data/config.json
- 链接必须写相对路径：
<a href="about.html"></a>、<link rel="stylesheet" href="css/style.css">、fetch('data/config.json') - 禁用绝对路径：
<a href="/about.html"></a>（开头斜杠会从域名根开始找，而你的项目不在/下） - 不要硬编码端口或协议：
<a href="http://127.0.0.1:5500/about.html"></a>—— 这会让部署或换端口时全部失效
VSCode 内置 Live Preview 不适用于多页面跳转
VSCode 1.121+ 确实新增了内置 Live Preview（右上角 ?️ 图标），但它只是 WebView 预览，仍跑在 file:// 上，**不启动 HTTP 服务**。
- 适用场景：单页静态 HTML 快速看样式布局
- 不适用场景：含
<a href="xxx.html"></a>跳转、fetch、ES 模块、localStorage跨页共享等 - 验证方法：打开预览后按
Cmd+Opt+I（Mac）或Ctrl+Shift+I（Win）打开 DevTools，看 Network 标签页的协议是不是file://
真正让多页面能跳、能读、能交互的，只有 HTTP 服务这一条路。Live Server 启动后，别只盯着首页——点链接、切页面、改 JS、存文件，观察浏览器是否实时响应，这才是验证是否真正跑通的关键动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
