vscode怎么运行多个html_vscode运行多html技巧【技巧】-html教程-PHP中文网

vscode怎么运行多个html_vscode运行多html技巧【技巧】

爱谁谁

发布： 2025-12-04 19:07:34

原创

332人浏览过

使用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_vscode运行多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 文件。

绘蛙-创意文生图

绘蛙平台新推出的AI商品图生成工具

查看详情

立即学习“前端免费学习笔记（深入）”；

拖动文件标签到编辑器右侧，实现左右分屏
每个文件都可以独立保存，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 实例服务，无需为每个文件单独启动服务。

以上就是vscode怎么运行多个html_vscode运行多html技巧【技巧】的详细内容，更多请关注php中文网其它相关文章！