vite-plugin-devkit

一个功能丰富的 Vite 开发工具包，提供项目构建信息注入、自动打包和国际化支持。

功能特性

🎯 控制台信息插件 (consoleInfo)

• 🚀 自动获取 Git 提交信息（提交人姓名、邮箱）
• ⏰ 记录构建时间
• 🌍 显示构建环境信息
• 🎨 美观的控制台输出样式
• ⚙️ 灵活的配置选项
• 📦 支持 TypeScript
• 🔧 只在生产构建时生效

📦 自动打包插件 (zipFolder)

• 📁 构建完成后自动压缩 dist 目录
• ⏱️ 使用时间戳命名，避免文件冲突
• 🗜️ 最高压缩级别优化文件大小
• ✅ 完善的错误处理机制

🌐 国际化支持 (i18n)

• 🔤 基于 Vue I18n 的完整国际化方案
• 🌏 内置中英文语言包支持
• 🔄 自动语言检测和切换
• 💾 语言设置持久化存储
• 🎛️ 灵活的语言配置选项
• 📱 支持 URL 参数和浏览器语言检测

安装

# npm
npm install vite-plugin-devkit --save-dev

# yarn
yarn add vite-plugin-devkit --dev

# pnpm
pnpm add vite-plugin-devkit --save-dev

使用方法

控制台信息插件

在你的 vite.config.js 或 vite.config.ts 中添加插件：

import { defineConfig } from 'vite'
import { consoleInfo } from 'vite-plugin-devkit'

export default defineConfig({
  plugins: [
    consoleInfo()
  ]
})

配置选项

import { consoleInfo } from 'vite-plugin-devkit'

export default defineConfig({
  plugins: [
    consoleInfo({
      enabled: true,        // 是否启用插件，默认: true
      position: 'head',     // 注入位置: 'head' | 'body'，默认: 'head'
      customInfo: {         // 自定义信息
        version: '1.0.0',
        author: '自定义作者'
      }
    })
  ]
})

自动打包插件

import { defineConfig } from 'vite'
import { zipFolder } from 'vite-plugin-devkit'

export default defineConfig({
  plugins: [
    zipFolder()
  ]
})

同时使用多个功能

import { defineConfig } from 'vite'
import { consoleInfo, zipFolder, initI18n } from 'vite-plugin-devkit'
import { createApp } from 'vue'

// Vite 配置
export default defineConfig({
  plugins: [
    consoleInfo({
      enabled: true,
      customInfo: {
        version: '1.0.0'
      }
    }),
    zipFolder()
  ]
})

// Vue 应用配置
const app = createApp(App)
initI18n(app) // 初始化国际化
app.mount('#app')

国际化功能使用

基础使用

import { createApp } from 'vue'
import { initI18n, $t, getlang } from 'vite-plugin-devkit'
import App from './App.vue'

const app = createApp(App)

// 初始化国际化
initI18n(app)

app.mount('#app')

// 在组件外使用翻译
console.log('当前语言:', getlang())
console.log('翻译文本:', $t('common.hello'))

在组件中使用

<template>
  <div>
    <h1>{{ $t('common.title') }}</h1>
    <p>{{ $t('common.description') }}</p>
    <button @click="changeLanguage">{{ $t('common.switchLang') }}</button>
  </div>
</template>

<script setup>
import { getlang, i18n } from 'vite-plugin-devkit'

const changeLanguage = () => {
  const currentLang = getlang()
  const newLang = currentLang === 'zh' ? 'en' : 'zh'
  
  // 切换语言
  i18n.global.locale.value = newLang
  sessionStorage.setItem('lang', newLang)
}
</script>

自定义语言包

import { createVueI18n, initI18n } from 'vite-plugin-devkit'

// 创建自定义语言包
const customMessages = {
  en: {
    common: {
      hello: 'Hello',
      welcome: 'Welcome to our app'
    },
    myApp: {
      title: 'My Application',
      description: 'This is my Vue.js application'
    }
  },
  zh: {
    common: {
      hello: '你好',
      welcome: '欢迎使用我们的应用'
    },
    myApp: {
      title: '我的应用',
      description: '这是我的 Vue.js 应用'
    }
  }
}

// 方式1: 创建自定义 i18n 实例
const customI18n = createVueI18n(customMessages)
app.use(customI18n)

// 方式2: 使用 initI18n 便捷函数
initI18n(app, customMessages)

API 参考

consoleInfo(options?)

控制台信息注入插件。

参数

| 参数 | 类型 | 默认值 | 描述 | |------|------|--------|------| | enabled | boolean | true | 是否启用插件 | | position | 'head' \| 'body' | 'head' | 脚本注入位置 | | customInfo | Record<string, string> | {} | 自定义信息对象，会覆盖默认的 Git 信息 |

返回值

Promise<Plugin> - Vite 插件对象

zipFolder()

自动打包插件，构建完成后将 dist 目录压缩成 ZIP 文件。

返回值

Promise<Plugin> - Vite 插件对象

语言设置优先级

国际化功能按以下优先级获取语言设置：

1. URL 查询参数: ?lang=en
2. sessionStorage: 已保存的用户语言偏好
3. 浏览器语言: navigator.languages[1] 或默认 'zh'

内置语言包

插件内置了基础的中英文语言包，包含常用的通用词汇：

// 内置的默认语言包
const defaultMessages = {
  en: {
    common: {
      hello: "Hello",
      goodbye: "Goodbye",
      confirm: "Confirm", 
      cancel: "Cancel",
      loading: "Loading...",
      error: "Error",
      success: "Success"
    }
  },
  zh: {
    common: {
      hello: "你好",
      goodbye: "再见",
      confirm: "确认",
      cancel: "取消", 
      loading: "加载中...",
      error: "错误",
      success: "成功"
    }
  }
}

您可以直接使用这些内置的翻译，也可以通过自定义语言包来扩展或覆盖它们。

输出效果

控制台信息输出

插件会在浏览器控制台输出如下信息：

---------项目信息---------
📅 构建时间: 2024/1/1 12:00:00
👨🏻‍💻 部署人员: John Doe
📧 邮箱: [email protected]
♻️ 环境: production
-------------------------

自动打包输出

构建完成后会在 dist 目录下生成压缩包：

dist/
├── index.html
├── assets/
│   ├── index-abc123.js
│   └── index-def456.css
└── 1699123456789.zip  # 时间戳命名的压缩包

控制台会显示：

🎉 压缩包已生成: ./dist/1699123456789.zip

TypeScript 支持

插件完全支持 TypeScript，提供了完整的类型定义：

import { defineConfig } from 'vite'
import { consoleInfo, zipFolder, ConsoleInfoOptions, initI18n, $t } from 'vite-plugin-devkit'
import { createApp } from 'vue'

// Vite 配置
const options: ConsoleInfoOptions = {
  enabled: true,
  position: 'head',
  customInfo: {
    version: '1.0.0'
  }
}

export default defineConfig({
  plugins: [
    consoleInfo(options),
    zipFolder()
  ]
})

// Vue 应用配置
const app = createApp(App)
initI18n(app)

// 类型安全的翻译
const message: string = $t('common.hello')

注意事项

控制台信息插件

• 插件只在 build 模式下生效，开发模式下不会注入信息
• 需要在 Git 仓库中使用才能获取到完整的 Git 信息
• 如果不在 Git 仓库中，会显示"未知"信息但不会报错

自动打包插件

• 只在构建时执行，开发模式下不会创建压缩包
• 压缩包会保存在 dist 目录下
• 使用时间戳命名避免文件名冲突
• 如果压缩失败，会终止构建流程并报错

国际化功能

• 需要 Vue 3.x 和 Vue I18n 10.x+ 支持
• 内置基础的中英文语言包，可直接使用
• 支持自定义语言包扩展和覆盖
• 支持通过 URL 参数动态切换语言
• 语言设置会自动保存到 sessionStorage
• 提供多种 API 方式满足不同使用场景

兼容性

• Node.js: >= 16.0.0
• Vite: >= 4.0.0 || >= 5.0.0
• Vue: >= 3.0.0
• Vue I18n: >= 10.0.0

依赖

核心依赖

• archiver: 用于创建 ZIP 压缩包
• vue-i18n: 提供国际化支持

对等依赖

• vite: Vite 构建工具
• vue: Vue.js 框架（仅国际化功能需要）

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.1.0

• 🌐 新增完整的国际化支持
• 📦 集成 Vue I18n 10.x
• 🔤 内置中英文语言包结构
• 🔄 支持动态语言切换
• 💾 语言设置持久化存储
• 📱 支持 URL 参数和浏览器语言检测
• 🎯 完善的 TypeScript 类型定义

1.0.0

• 🎉 首次发布
• ✨ 支持自动获取 Git 信息并注入到控制台
• ✨ 支持自定义配置选项
• ✨ 支持 TypeScript
• 📦 新增自动打包功能
• 🗜️ 构建完成后自动压缩 dist 目录

相关链接

• GitHub 仓库
• 问题反馈
• Vite 官方文档

示例项目

查看 examples 目录获取完整的使用示例。