Live Server 扩展的端口号是在服务启动时确定的,运行过程中不会动态变化。所谓“自动刷新端口”实际是指启动时若检测到端口冲突,扩展会自动尝试相邻端口,或通过配置固定端口以避免冲突。
先说结论:端口号在服务器运行期间固定不变,若需避免冲突可依赖默认自动递增机制,若需固定地址则指定具体数字。
- 适合本地前端开发调试,需要频繁启动停止服务的场景
- 修改配置后必须重启 Live Server 服务才能生效
- 验收时查看底部状态栏显示的端口号是否符合预期
配置固定端口
如果你希望固定使用某个端口(如 8080),可以直接修改用户设置文件。以下是配置 JSON 片段:
// 固定使用特定端口(如 8080) "liveServer.settings.port": 8080
注意:扩展默认行为即为端口冲突时自动递增(如 5500 被占用则尝试 5501),通常无需设置为 0 或特殊值。修改后需重启 Live Server 服务才能生效,点击底部状态栏的端口数字即可停止服务,再次点击 Go Live 重新启动。
排查端口占用与清理
如果启动失败或端口跳号,可能是目标端口被其他进程占用。以下是查看和清理占用进程的具体命令:
Windows 系统:
- 查看占用端口的进程 PID:
netstat -ano | findstr :5500
- 杀死占用进程(将
<PID>替换为实际数字):taskkill /F /PID <PID>
Mac / Linux 系统:
- 查看占用端口的进程 PID:
lsof -i :5500
- 杀死占用进程(将
<PID>替换为实际数字):kill -9 <PID>
验证生效
启动服务后,观察 VSCode 底部蓝色状态栏。它会显示类似 Port: 5500 或 Port: 8080 的文字。将鼠标悬停在该文字上,会显示完整的本地访问地址。同时在浏览器中访问该地址,确认页面能正常加载且修改 HTML 文件后页面能自动刷新。
常见坑
1. 端口占用未释放:有时停止服务后端口仍被占用,导致下次启动跳号。此时可重启 VSCode 或使用上述命令清理占用进程。
2. 浏览器缓存:如果端口变化了,浏览器可能仍缓存旧端口的资源。建议硬刷新页面(Ctrl+F5)或关闭旧标签页。
3. 多项目冲突:如果同时打开多个 VSCode 窗口并启动 Live Server,固定端口会导致冲突,建议多项目时使用默认配置(不设置 port),让扩展自动分配。