Version Update Notifier

检测应用版本更新并提示用户刷新的组件，支持 Vue 和 React。

安装

npm install version-update-notifier

使用

Vue

1. 创建一个 VersionUpdateNotifier.vue 文件，并复制以下代码：

<template>
  <update-notifier :options="options" />
</template>

<script>
import { UpdateNotifier } from "version-update-notifier/vue";

export default {
  components: {
    UpdateNotifier,
  },
  data() {
    return {
      options: {
        checkInterval: 30000, // 30秒检查一次
        versionFile: "/version.json", // 版本文件路径
      },
    };
  },
};
</script>

React

1. 创建一个 VersionUpdateNotifier.jsx 文件，并复制以下代码：

import React from "react";
import UpdateNotifier from "version-update-notifier/react";

function App() {
  return (
    <UpdateNotifier
      options={{
        checkInterval: 30000,
        versionFile: "/version.json",
      }}
      features={["性能优化", "新增功能"]}
    />
  );
}

配置选项

配置选项

| 选项 | 类型 | 默认值 | 说明 | | ------------- | ------- | --------------- | ------------------------ | | checkInterval | number | 30000 | 检查间隔（毫秒） | | autoRefresh | boolean | true | 是否自动刷新 | | refreshDelay | number | 10000 | 自动刷新延迟时间（毫秒） | | hiddenStop | boolean | true | 页面隐藏时停止检查 | | versionFile | string | '/version.json' | 版本文件路径 |

事件

• update(version): 当检测到新版本时触发
• beforeRefresh(seconds): 自动刷新前触发，每秒触发一次

使用说明

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

{ "version": "1.0.0" }

2.在部署新版本时，更新这个文件中的版本号

3.在 Vue 或 React 应用中引入组件

最佳实践

1.在开发环境中禁用自动检测：

// Vue
:options="{
checkInterval: process.env.NODE_ENV === 'production' ? 30000 : 0
}"

// React
options={{
  checkInterval: process.env.NODE_ENV === 'production' ? 30000 : 0
}}

2.自定义通知内容：

<update-notifier
  :features="['新增用户管理功能', '优化了页面加载速度', '修复了已知问题']"
/>

2.添加自定义事件处理：

// Vue
created() {
this.notifier.on('update', (version) => {
console.log('新版本:', version);
// 自定义逻辑
});
}

// React
useEffect(() => {
// 在组件挂载时设置事件监听
if (notifier) {
notifier.on('update', (version) => {
console.log('新版本:', version);
// 自定义逻辑
});
}
}, [notifier]);

总结

这个组件提供了以下功能：

自动检测版本更新

优雅的用户通知界面

自动刷新功能

支持自定义配置

支持 Vue 和 React（16.8.0 或更高版本） 框架