怎么在 VSCode 中配置 Live Server 自动刷新端口号

文章导读
Live Server 扩展的端口号是在服务启动时确定的,运行过程中不会动态变化。所谓“自动刷新端口”实际是指启动时若检测到端口冲突,扩展会自动尝试相邻端口,或通过配置固定端口以避免冲突。
📋 目录
  1. 配置固定端口
  2. 排查端口占用与清理
  3. 验证生效
  4. 常见坑
A A

Live Server 扩展的端口号是在服务启动时确定的,运行过程中不会动态变化。所谓“自动刷新端口”实际是指启动时若检测到端口冲突,扩展会自动尝试相邻端口,或通过配置固定端口以避免冲突。

先说结论:端口号在服务器运行期间固定不变,若需避免冲突可依赖默认自动递增机制,若需固定地址则指定具体数字。

  • 适合本地前端开发调试,需要频繁启动停止服务的场景
  • 修改配置后必须重启 Live Server 服务才能生效
  • 验收时查看底部状态栏显示的端口号是否符合预期

配置固定端口

如果你希望固定使用某个端口(如 8080),可以直接修改用户设置文件。以下是配置 JSON 片段:

// 固定使用特定端口(如 8080)
"liveServer.settings.port": 8080

注意:扩展默认行为即为端口冲突时自动递增(如 5500 被占用则尝试 5501),通常无需设置为 0 或特殊值。修改后需重启 Live Server 服务才能生效,点击底部状态栏的端口数字即可停止服务,再次点击 Go Live 重新启动。

排查端口占用与清理

如果启动失败或端口跳号,可能是目标端口被其他进程占用。以下是查看和清理占用进程的具体命令:

Windows 系统:

怎么在 VSCode 中配置 Live Server 自动刷新端口号
  1. 查看占用端口的进程 PID:
    netstat -ano | findstr :5500
  2. 杀死占用进程(将 <PID> 替换为实际数字):
    taskkill /F /PID <PID>

Mac / Linux 系统:

  1. 查看占用端口的进程 PID:
    lsof -i :5500
  2. 杀死占用进程(将 <PID> 替换为实际数字):
    kill -9 <PID>

验证生效

启动服务后,观察 VSCode 底部蓝色状态栏。它会显示类似 Port: 5500Port: 8080 的文字。将鼠标悬停在该文字上,会显示完整的本地访问地址。同时在浏览器中访问该地址,确认页面能正常加载且修改 HTML 文件后页面能自动刷新。

常见坑

1. 端口占用未释放:有时停止服务后端口仍被占用,导致下次启动跳号。此时可重启 VSCode 或使用上述命令清理占用进程。

2. 浏览器缓存:如果端口变化了,浏览器可能仍缓存旧端口的资源。建议硬刷新页面(Ctrl+F5)或关闭旧标签页。

3. 多项目冲突:如果同时打开多个 VSCode 窗口并启动 Live Server,固定端口会导致冲突,建议多项目时使用默认配置(不设置 port),让扩展自动分配。