使用Live Server插件可在VSCode中高效运行多个HTML文件。1. 安装Ritwick Dey开发的Live Server插件，无需配置即可使用。2. 右键单个HTML文件选择“Open with Live Server”，浏览器将通过本地服务器（默认端口5500）打开页面。3. 多个HTML文件可共用同一服务实例，依次右键打开，将在相同域名下以不同路径访问（如http://127.0.0.1:5500/page2.html）。4. 利用VSCode分屏功能拖动文件标签实现左右布局，便于多页面同步编辑与调试。5. 可选配置settings.json自定义端口、根目录或忽略文件，提升项目管理效率。所有同目录HTML文件共享一个服务，无需重复启动，简化多页开发流程。
在 VSCode 中运行多个 HTML 文件并不需要复杂操作，关键是借助合适的工具和工作流来提升效率。最常用的方式是结合 Live Server 插件与 VSCode 的多标签管理能力，实现快速预览多个页面。
1. 安装 Live Server 插件
Live Server 是 VSCode 中最流行的本地开发服务器工具，能自动启动浏览器并实时刷新页面。
操作步骤：- 打开 VSCode 扩展商店（快捷键 Ctrl+Shift+X）
- 搜索 "Live Server"，选择由 Ritwick Dey 开发的版本并安装
- 安装完成后无需额外配置即可使用
2. 快速运行多个 HTML 文件
你可以同时为不同的 HTML 文件启动多个服务，或在同一服务器下访问多个页面。
方法一：通过右键菜单启动单个文件- 在编辑器中打开一个 HTML 文件
- 右键点击编辑区域，选择 “Open with Live Server”
- 浏览器会打开该文件，默认端口为 5500
- 保持第一个 HTML 页面通过 Live Server 打开
- 再打开另一个 HTML 文件，同样右键选择 “Open with Live Server”
- 新页面会在相同域名不同路径下加载（如 http://127.0.0.1:5500/page2.html），共用一个服务实例
3. 使用多标签和侧边布局提高效率
VSCode 支持分屏编辑，方便你同时编写多个 HTML 文件。
立即学习“前端免费学习笔记（深入）”；
- 拖动文件标签到编辑器右侧，实现左右分屏
- 每个文件都可以独立保存，Live Server 会自动刷新对应页面
- 适合做多页面项目（如首页、列表页、详情页）时同步调试
4. 配置默认主页和端口（可选进阶设置）
如果你希望自定义行为，可以在项目根目录添加 settings.json 配置。
示例配置：{
"liveServer.settings.port": 8080,
"liveServer.settings.defaultPort": 8080,
"liveServer.settings.root": "/",
"liveServer.settings.ignoreFiles": [
"temp.html"
]
}
这样可以统一端口，避免冲突，并指定哪些文件不自动打开。
基本上就这些。配合 Live Server 和 VSCode 原生功能，运行和调试多个 HTML 页面变得非常简单。不复杂但容易忽略的是——所有 HTML 文件只要在同一项目目录下，都能被同一个 Live Server 实例服务，无需为每个文件单独启动服务。
