🚀 一个精美的 Vite 开发服务器启动信息插件，提供企业级的终端输出体验
- 🎨 精美的视觉效果 - 使用丰富的颜色和图标打造专业级启动界面
- 🔧 智能信息整合 - 自动获取版本号、Git 信息、服务器地址等开发信息
- 🚫 原生信息屏蔽 - 智能屏蔽 Vite 原生的杂乱输出，保留重要开发信息
- ⚡ 零配置使用 - 开箱即用，同时支持灵活的自定义配置
- 📦 自动版本读取 - 自动从
package.json读取最新版本信息 - 🌿 Git 集成 - 显示当前分支和提交哈希，便于开发调试
- 🛡️ 团队协作 - 支持团队信息、警告提示等协作功能
- 🔄 配置重载提醒 - 配置文件更改时提供友好的重载提示
npm install vite-console-plugin --save-dev
# 或
yarn add vite-console-plugin -D
# 或
pnpm add vite-console-plugin -D// vite.config.ts
import { defineConfig } from 'vite'
import viteConsolePlugin from 'vite-console-plugin'
export default defineConfig({
plugins: [
viteConsolePlugin({
systemName: 'My App',
description: '我的应用系统',
owner: 'Your Name'
})
]
})// vite.config.ts
import { defineConfig } from 'vite'
import viteConsolePlugin from 'vite-console-plugin'
export default defineConfig({
plugins: [
viteConsolePlugin({
systemName: 'Robot_Admin',
description: '后台管理系统',
team: 'AGILE|TEAM',
owner: 'CHENY',
warning: '请勿随意修改配置文件',
security: '禁止部署未加密的敏感数据',
autoVersion: true
})
]
})| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
systemName |
string |
'Robot_Admin' |
系统名称 |
description |
string |
'后台管理系统' |
系统描述 |
team |
string |
'AGILE|TEAM' |
团队名称 |
owner |
string |
'CHENY' |
项目负责人 |
warning |
string |
'请勿随意修改配置文件' |
协作警告信息 |
security |
string |
'禁止部署未加密的敏感数据' |
安全警告信息 |
autoVersion |
boolean |
true |
是否自动读取 package.json 版本 |
──────────────────────────────────────────────────
🚀 Robot_Admin 后台管理系统
⚡ 服务器信息
● 本地访问 http://localhost:3000/
● 网络访问 http://192.168.1.100:3000/
● 开发工具 Vue DevTools & UnoCSS Inspector
📦 项目信息
● 版本号 v1.2.3
● 启动时间 2025-08-01 10:30:45
● Git 分支 main
● 提交哈希 a1b2c3d
👥 团队信息
● 架构组 AGILE|TEAM
● 负责人 CHENY
⚠️ 重要提醒
● 请勿随意修改配置文件
● 禁止部署未加密的敏感数据
✨ 启动成功！ 开发服务器已就绪
──────────────────────────────────────────────────
⚡ 配置重载 配置文件已更改，请验证修改项并告知相关干系人
插件会自动获取以下信息：
- 版本号: 从
package.json自动读取，失败时默认为1.0.0 - Git 分支: 通过
git rev-parse --abbrev-ref HEAD获取当前分支 - Git 提交: 通过
git rev-parse --short HEAD获取最新提交的短哈希 - 服务器地址: 自动获取本地和网络访问地址
- 启动时间: 服务器启动的具体时间（中文格式）
插件会智能屏蔽 Vite 原生的以下输出，但保留重要的开发信息：
屏蔽的信息：
➜ Local: http://localhost:xxxx/➜ Network: use --host to expose➜ Vue DevTools: Open http://...➜ UnoCSS Inspector: http://...➜ press h + enter to show help- DevTools 相关的所有 URL 和快捷键提示
保留的重要信息：
ready in Xms- 构建完成时间built in Xms- 构建耗时server restarted- 服务器重启hmr update- HMR 更新dependencies optimized- 依赖优化完成- 所有错误和警告信息
插件使用丰富的 ANSI 颜色和 Unicode 图标：
颜色方案：
- 🟢 绿色：成功状态和本地地址
- 🔵 蓝色：信息和网络地址
- 🟡 黄色：警告和提交信息
- 🔴 红色：安全警告
- 🟣 紫色：开发工具和分支信息
- ⚪ 白色：标题和重要信息
- 🔘 灰色：分隔线和次要信息
图标系统：
- 🚀 系统启动
- 📦 项目信息
- 👥 团队信息
⚠️ 重要提醒- ⚡ 服务器状态
- 🛡️ 安全提醒
viteConsolePlugin({
systemName: 'TeamProject',
description: '团队协作项目',
team: 'Frontend Team',
owner: '项目负责人',
warning: '修改配置前请通知团队成员',
security: '生产环境注意数据安全',
autoVersion: true
})viteConsolePlugin({
systemName: 'Personal Project',
description: '个人开发项目',
owner: 'Your Name',
autoVersion: true,
// 个人项目可以简化警告信息
warning: '注意代码规范',
security: '保护敏感信息'
})viteConsolePlugin({
systemName: 'Simple App'
// 其他选项将使用默认值
})- Logger 重写: 通过重写
server.config.logger.info/warn实现信息拦截 - Console 拦截: 同时拦截
console.log/info/warn确保完整屏蔽 - 状态管理: 使用
globalThis.__vite_console_plugin_state__避免多实例重复输出 - 延迟显示: 使用 350ms 延迟确保服务器完全启动后再显示信息
- 正则匹配: 通过多个正则表达式精确匹配需要屏蔽的信息模式
- 错误处理: 所有外部命令调用都有完善的错误处理机制
// 屏蔽判断 - 清理 ANSI 颜色代码后进行模式匹配
function shouldBlockMessage(msg: string): boolean {
const cleanMsg = msg.replace(/\x1b\[[0-9;]*m/g, '').trim();
// 匹配多种屏蔽模式...
}
// 重要信息判断 - 保留对开发有价值的信息
function isImportantDevMessage(msg: string): boolean {
// 匹配构建时间、HMR更新等重要信息...
}- ✅ Vite 3.0+
- ✅ Node.js 16+
- ✅ TypeScript 完整支持
- ✅ Windows / macOS / Linux
- ✅ 支持 pnpm / yarn / npm
export default function viteConsolePlugin(): Plugin {
return {
name: "vite-console-plugin",
apply: "serve", // 只在 vite dev 时生效
// ...
}
}插件会自动设置 clearScreen: false 以保持输出的连续性。
- 🎉 初始版本发布
- ✨ 支持精美的启动界面显示
- 🔧 自动获取项目和Git信息
- 🚫 智能屏蔽原生杂乱输出
- 🎨 完整的颜色和图标系统
- ⚡ 配置重载友好提示
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
CHENY - @ycyplus
如果这个插件对你有帮助，请给个 ⭐️ 支持一下！
Made with ❤️ by CHENY