version-rocket使用记录

version-rocket的使用场景：

用户在浏览器中打开某 web 应用很长时间且未刷新页面, 在应用有新版本更新或问题修复时, 用户会无法及时知晓有新版发布, 导致用户继续使用旧的版本, 影响用户体验和后端数据准确性。

当然，也有更高级的场景，可以通过底部链接进到官网了解和学习。

此处使用插件实现的主要功能就是通过页面右下角弹窗的形式，提醒到用户应用有更新，可以通过刷新体验新功能。

插件是通过线上原有版本号与部署新应用的版本号进行对比，两次版本号不同，则判定有应用有更新，从而实现提醒。

以下是我使用时的一些步骤（仅供参考）：

1、安装

// npm npm install version-rocket --save

// yarn yarn add version-rocket

# pnpm pnpm install version-rocket

2、app.vue中导入checkVersion、uncheckVersion并调用

import { checkVersion } from 'version-rocket'
// 推荐使用 package.json 中的 version 字段, 也可自定义 version
import { version } from '../package.json'
// 在生命周期中进行调用
mounted() {
  // 开启版本检测
  checkVersion({
    localPackageVersion: version,
    originVersionFileUrl: `${location.origin}/shca/version.json`,
  })
},

destroyed() {
  // 终止版本检测
  unCheckVersion({closeDialog: false})
}

3、在package.json中，新增一条script脚本命令，新命令中的dist目录可以根据实际项目打包outputDir来修改

{
  "name": "test",
  "description": "test",
  "private": true, "version": "0.0.1",
  "scripts": {
    ...
    // 新增script命令
    "generate:version": "generate-version-file dist public"
    ...
   },
 ... }

4、正常运行打包命令后运行npm run generate:version；

【这一步也可以和打包命令合并成一个命令，新命令中的dist目录可以根据实际项目打包outputDir来修改】

// package.json---->script
// 原本打包命令
"build": "vue-cli-service build",
// 合并后的打包命令
"build": "vue-cli-service build && generate-version-file dist public",

5、部署新老版本后进行测试。

其他：在运行checkVersion时，可以传入第二个options的参数调整一些个性化设置，例如弹窗标题、内容、按钮文案、图片内容等

参数	类型	描述	默认值	必需
options	object	弹窗文案和主题的配置项 (不自定义弹窗 UI, 但有修改文案和主题的需求时使用)		否
options.title	string	弹窗的标题	Update	否
options.description	string	弹窗的描述	V xxx is available	否
options.buttonText	string	弹窗按钮的文案	Refresh	否
options.cancelButtonText	string	关闭弹窗按钮的文案 (如果你希望弹窗允许被关闭, 请添加此选项) v1.5.0		否
options.cancelMode	ignore-current-version (当前版本不再提示) / ignore-today (今天不再提示) / ignore-current-window (当前窗口不再提示)	关闭弹窗的模式 (当 cancelButtonText 设置后生效) v1.5.0	ignore-current-version	否
options.cancelUpdateAndStopWorker	boolean	关闭弹窗时, 也关闭 worker (当 cancelButtonText 设置后生效) v1.5.0	false	否
options.imageUrl	string	弹窗的提示图片		否
options.rocketColor	string	弹窗提示图片中火箭的主题色, 设置后 options.imageUrl 无效		否
options.primaryColor	string	弹窗的主题色, 会作用到提示图片背景色和按钮背景色, 设置后 imageUrl 无效		否
options.buttonStyle	string	弹窗按钮的 css 配置, 可以覆盖掉默认的按钮样式		否

ps->官方文档地址：github.com/guMcrey/ver…