必须用 HTTP 服务器（如 Live Server）运行多页面 HTML 项目，因浏览器禁止 file:// 协议下的跨文件跳转、模块加载和 fetch；Live Server 提供真实 HTTP 服务，支持相对路径引用、自动刷新，并可配置端口、主机和根目录。
直接双击 HTML 文件或用浏览器打开 file:// 协议地址，多页面跳转、JS 模块加载、fetch 读取本地 JSON 都会失败——这不是你代码写错了，是浏览器安全策略拦的。真正能跑通多页面项目的唯一可靠方式，是用 http:// 协议启动本地服务器。
为什么 Live Server 是默认选择
Live Server 启动的是一个真实 HTTP 服务（默认端口 5500），所有相对路径、跨页面链接、静态资源引用、ES 模块导入、localStorage 和 fetch('./data.json') 全部正常工作。它不依赖 Node.js 环境，安装即用，且自动监听文件变化并刷新浏览器。
常见错误现象：
- 点击
about.html链接后空白页，控制台报net::ERR_FILE_PROTOCOL -
import语句报错Failed to resolve module specifier - 右键菜单里没有
Open with Live Server—— 说明当前没打开任何.html文件，或插件未激活
多页面项目结构必须用相对路径
Live Server 的根目录默认是 VSCode 当前打开的文件夹（即你通过 File → Open Folder 打开的路径）。所有 HTML 页面之间跳转必须用相对路径，不能写绝对路径或硬编码端口。
立即学习“前端免费学习笔记（深入）”；
示例结构：
/my-site ├── index.html ├── about.html ├── contact.html ├── css/style.css ├── js/main.js └── data/info.json
在 index.html 中写链接：
<a href="about.html">关于我们</a> <a href="./contact.html">联系我们</a> <link rel="stylesheet" href="css/style.css"> <script type="module" src="js/main.js"></script>
注意：./contact.html 和 contact.html 效果一致；但 /contact.html（开头带斜杠）会从服务器根路径找，容易 404。
端口冲突、局域网访问和根目录配置
如果 5500 端口被占（比如另一个 Live Server 或 Python 的 http.server），插件会自动换端口并提示，但最好主动配好避免混乱。
在 VSCode 设置（Ctrl + ,）中搜索以下配置项：
-
liveServer.settings.port：填入固定端口号，如3000 -
liveServer.settings.host：设为0.0.0.0才能让手机或同事电脑通过 Wi-Fi 访问（例如http://192.168.x.x:3000/index.html） -
liveServer.settings.root：若 HTML 文件不在项目根目录（比如全在src/下），填"./src"，否则会找不到css/等子目录
也可以在项目根目录建 .vscode/settings.json，内容如下：
{
"liveServer.settings.port": 3000,
"liveServer.settings.host": "0.0.0.0",
"liveServer.settings.root": "./src"
}
别踩这些坑
Live Server 不是万能的，有些场景它压根不适用：
- 项目用了
Vite、Webpack或Vue/React单页应用——这时该用对应框架的 dev server，不是 Live Server - 想调试 Chrome DevTools 的断点，但
launch.json还指着localhost:8080：必须把url改成http://127.0.0.1:3000/index.html（端口要和 Live Server 一致） - 路径含中文或空格：新版 Live Server 已支持，但旧版或某些系统命令行仍可能出问题，建议项目路径全用英文+下划线
- 误以为“Go Live”按钮能全局启动：它只对当前编辑器里已打开的 HTML 文件生效，没打开文件时按钮是灰的
最常被忽略的一点：Live Server 启动后，浏览器地址栏显示的是 http://127.0.0.1:3000/index.html，不是 file:///。只要看到这个地址，才算真正跑在服务器上——其他一切功能都基于此成立。
