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