Skip to content

Dev Server Monitor

在状态栏实时监控开发服务器状态，支持热重载反馈和失败自动回退。

功能

状态栏监控：空闲 / 构建中 / 运行中 三种状态实时显示
热重载感知：保存 .vue / .js / .ts / .jsx / .tsx 文件时自动显示构建中状态
失败自动回退：连续多次检测失败后自动切回空闲，避免误报
点击切换终端：点击状态栏项切换终端显示

安装

在 VS Code 扩展市场搜索 Vue Dev Server Monitor
点击安装

配置

配置项	默认值	说明
`vueStatus.enable`	`true`	启用/禁用监控
`vueStatus.updateInterval`	`3000`	检测间隔（毫秒）
`vueStatus.defaultPort`	`5173`	开发服务器端口
`vueStatus.failureThreshold`	`3`	连续失败阈值，超过认为服务停止
`vueStatus.showNotifications`	`true`	状态变化时显示通知

命令

命令	说明
`Vue Status: 打开浏览器`	访问开发服务器
`Vue Status: 检查服务器状态`	手动触发一次状态检测
`Vue Status: 设置服务器端口`	手动指定端口
`Vue Status: 显示运行日志`	查看检测日志

工作原理

通过 HTTP HEAD 请求检测端口可用性：

请求成功 → 运行中
运行中状态下检测失败一次 → 构建中
连续失败达到阈值 → 空闲

许可证

MIT