使用Live Server扩展在VSCode中运行多页面HTML项目，通过本地服务器解决浏览器安全策略限制。安装Live Server后右键HTML文件选择“Open with Live Server”，浏览器将以http://127.0.0.1:5500/访问页面，支持页面跳转和资源加载。合理组织项目结构并使用相对路径链接页面，可确保所有文件正常加载。还可配置settings.json设置根目录和端口，或使用Node.js、Python启动其他本地服务器实现相同功能。
在 VSCode 中运行包含多个 HTML 页面的项目，关键在于使用合适的本地服务器工具来预览页面，而不是直接打开 HTML 文件。由于浏览器的安全策略，多页面跳转、资源加载等功能在 file:// 协议下可能无法正常工作。以下是具体操作方法。
安装并使用 Live Server 扩展
Live Server 是 VSCode 中最常用的轻量级本地服务器工具，能自动启动一个开发服务器，并支持热重载。
步骤如下：- 打开 VSCode，进入扩展市场（左侧活动栏拼图图标）
- 搜索 Live Server，由 Ritwick Dey 开发
- 点击安装
- 安装完成后，在任意 HTML 文件中右键，选择 Open with Live Server
此时会启动默认浏览器，并通过 http://127.0.0.1:5500/ 访问当前文件。你可以在不同页面间通过链接正常跳转。
组织多页面项目的结构
确保你的项目结构清晰，便于维护和访问。
立即学习“前端免费学习笔记（深入）”；
/my-project
│
├── index.html
├── about.html
├── contact.html
├── css/
│ └── style.css
├── js/
│ └── main.js
└── images/
└── logo.png
在 HTML 文件中使用相对路径进行页面跳转：
关于我们 联系我们
这样在 Live Server 下运行时，所有页面和资源都能正确加载。
设置默认启动页面（可选）
如果你希望每次打开项目时自动加载 index.html，可以配置 Live Server 的默认入口。
- 打开 VSCode 设置（Ctrl + ,）
- 搜索 Live Server settings
- 找到 Live Server > Settings: Root
- 设置项目根目录（如果需要）
- 或在项目根目录创建
.vscode/settings.json文件：
{
"liveServer.settings.root": "/",
"liveServer.settings.port": 5500
}
手动使用其他本地服务器（可选）
如果你不想用 Live Server，也可以使用 Node.js 搭建简易服务器。
- 确保已安装 Node.js
- 在项目根目录打开终端
- 运行命令：
npx live-server或python -m http.server（Python 3）
浏览器将自动打开首页，支持多页面访问。
基本上就这些。只要通过本地服务器运行，VSCode 就能完美支持多页面 HTML 项目。Live Server 是最简单高效的选择，适合前端初学者和小型项目。
