vue-auto-version

一个用于 Vue 3 的自动版本管理和更新提示插件。

功能特点

• 自动管理版本号
• 构建时自动更新版本
• 检测到新版本时提示用户刷新
• 支持自定义检查间隔
• 支持自定义提示文案

安装

npm install vue-auto-version

使用

1. 在项目中创建 public/version.json 文件：

{
  "version": "1.0.0",
  "buildTime": "2024-01-01 12:00:00"
}

2. 在 package.json 中添加构建脚本：

{
  "scripts": {
    "build": "node node_modules/vue-auto-version/scripts/update-version.js && vite build"
  }
}

3. 在 main.js 中配置插件：

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import VueAutoVersion from "vue-auto-version";

const app = createApp(App);

app.use(ElementPlus);
app.use(VueAutoVersion, {
  version: "1.0.0", // 初始版本号
  versionFile: "/version.json", // 版本信息文件路径
  checkInterval: 5 * 60 * 1000, // 检查间隔（毫秒）
  title: "版本更新提示", // 可选
  message: "检测到新版本已发布，是否立即刷新页面以获取最新内容？", // 可选
  confirmText: "立即刷新", // 可选
  cancelText: "稍后刷新", // 可选
});

app.mount("#app");

版本更新规则

每次运行 npm run build 时：

1. 自动增加修订号（patch）
2. 更新 package.json 中的版本号
3. 更新 public/version.json 文件

例如：

• 1.0.0 -> 1.0.1
• 1.0.1 -> 1.0.2

选项

| 选项 | 类型 | 默认值 | 说明 | | ------------- | ------ | ------------------------------------------------------ | ---------------- | | version | string | 必填 | 初始版本号 | | versionFile | string | '/version.json' | 版本信息文件路径 | | checkInterval | number | 5 _ 60 _ 1000 | 检查间隔（毫秒） | | title | string | '版本更新提示' | 提示框标题 | | message | string | '检测到新版本已发布，是否立即刷新页面以获取最新内容？' | 提示信息 | | confirmText | string | '立即刷新' | 确认按钮文本 | | cancelText | string | '稍后刷新' | 取消按钮文本 |

手动检查更新

// 在组件中
this.$autoVersion.check();

License

MIT