在vscode中开发前端项目时，经常会遇到需要同时运行多个html文件查看不同页面效果的情况，掌握对应的运行技巧可以大幅提升开发调试效率。
使用Live Server插件运行多个html
Live Server是vscode中最常用的前端开发插件，支持快速启动本地服务，同时访问多个html文件，操作步骤如下：
1. 安装Live Server插件
打开vscode，点击左侧扩展面板，搜索Live Server，找到对应插件后点击安装，安装完成后重启vscode即可生效。
2. 启动本地服务并访问多个html
在项目根目录右键选择Open with Live Server，插件会自动启动本地服务，默认端口为5500。此时浏览器地址栏会显示当前打开的html路径，比如http://127.0.0.1:5500/index.html。
如果要访问同项目下的其他html文件，只需要修改地址栏的文件名即可，比如访问test.html，只需要将地址改为http://127.0.0.1:5500/test.html，不需要重新启动服务，刷新页面就能看到对应内容。
示例项目结构如下：
project/
├── index.html
├── test.html
├── about.html
└── css/
└── style.css
启动服务后，三个html文件都可以通过修改地址栏路径直接访问，修改文件内容后页面会自动刷新，非常方便。
手动搭建简易本地服务运行多个html
如果不想安装插件，也可以借助node.js手动搭建本地服务，步骤如下：
1. 初始化项目并安装依赖
在项目根目录打开终端，执行以下命令初始化项目并安装express依赖：
// 初始化package.json npm init -y // 安装express npm install express --save
2. 编写服务代码
在项目根目录新建server.js文件，写入以下代码：
const express = require('express')
const app = express()
const path = require('path')
// 设置静态文件目录为当前项目根目录
app.use(express.static(path.join(__dirname)))
// 监听3000端口
app.listen(3000, () => {
console.log('服务已启动，访问地址：http://127.0.0.1:3000')
})
3. 启动服务访问文件
在终端执行node server.js启动服务，之后在浏览器中访问http://127.0.0.1:3000/xxx.html即可查看对应的html文件，同样支持多个文件切换访问。
不同场景的技巧选择
如果是简单的静态html项目，优先选择Live Server插件，安装即用无需写代码，适合快速调试。如果是需要自定义服务逻辑的项目，比如需要接口代理、路由配置等，可以选择手动搭建express服务，扩展性更强。
另外需要注意，如果html文件中引用了本地资源，比如css、js文件，使用本地服务运行时，资源路径要写成相对路径，避免出现资源加载失败的问题。比如引用同目录下的style.css，应该写成<link rel="stylesheet" href="style.css">，而不是绝对路径。
常见问题解答
- 启动Live Server后提示端口被占用怎么办？可以在vscode设置中搜索Live Server Port，修改默认端口号即可。
- 手动搭建的服务访问html时提示404？检查文件路径是否正确，静态目录配置是否指向了项目根目录。
- 多个html文件之间跳转怎么实现？可以直接使用a标签，href属性填写目标html的相对路径，比如
<a href="test.html">跳转到test页面</a>。
vscodehtml多文件运行live_server修改时间：2026-07-08 05:15:21