vue2-update-listener

一个用于监听项目构建更新的 Vue 插件，当新版本构建完成时，会提示用户刷新页面以获取最新版本。

需配合 vue-cli-plugin-update-listener 使用

安装

npm install vue2-update-listener --save

使用方法

在项目中使用

import Vue from 'vue'
import UpdateListener from 'vue2-update-listener'

// CSS 文件的引入是可选的，取决于你的项目配置
import 'vue2-update-listener/lib/vue2-update-listener.css' // 可选

Vue.use(UpdateListener, {
  // 版本信息文件路径，默认为 '/dist'
  versionUrl: '/dist',
  
  // 检查更新间隔时间，默认为 5 分钟
  interval: 5 * 60 * 1000,
  
  // 是否显示更新提示，默认为 true
  isTip: true,
  
  // 是否监听 JS 错误，默认为 false
  isListenJSError: false,
  
  // 弹窗配置
  modalProps: {
    content: '发现新版本，是否立即更新？',
    mountedEl: document.body
  },
  
  // 弹窗样式类型，可选值：'element'、'qingmu'
  type: 'qingmu',
  
  // 是否刷新同源页面，默认为 true
  refreshSameOrigin: true,
  
  // 是否提示更新，默认为true
  isTip: true,
  
  // 是否监听JS报错，默认为false
  isListenJSError: false,
  
  // 弹窗配置
  modalProps: {
    content: '发现新版本，是否立即更新？',
    mountedEl: document.body
  },
  
  // 弹窗样式类型，默认为'qingmu', 可选值为'element'、'qingmu'、'custom'(暂不支持)
  type: 'qingmu',
  
  // 弹窗常显测试
  showTest: false,
  
  // 是否刷新同源页面，默认为true
  refreshSameOrigin: true
})

version.json 文件格式

在你的构建目录（默认是 /dist）下需要有一个 version.json 文件，格式如下：

{
  "commitHash": "abc123", // 版本哈希值
  "isTip": true          // 是否显示更新提示
}

特性

• 自动检测新版本
• 支持多种弹窗样式
• 支持同源页面同步刷新
• JS 错误监听和自动更新
• 可配置更新检查间隔
• 支持自定义更新提示内容和主题样式

常见问题

1. 模块解析错误

如果遇到 "Module parse failed: Unexpected token" 错误，请检查：

1. 确保项目中已安装 babel-loader 和相关依赖：

npm install --save-dev babel-loader @babel/core @babel/preset-env

2. 在 webpack 配置中正确配置 babel-loader（参考上面的配置示例）

3. 如果使用 Vue CLI，确保在 vue.config.js 中添加 transpileDependencies 配置

2. 样式加载问题

如果遇到样式相关错误，请检查：

1. 确保已安装所需的 loader：

npm install --save-dev style-loader css-loader sass-loader sass

2. 在 webpack 配置中正确配置样式 loader（参考上面的配置示例）

注意事项

1. 确保构建目录下有 version.json 文件
2. 确保 versionUrl 配置正确指向 version.json 所在目录
3. 如果使用 Vue CLI，建议将插件添加到 transpileDependencies 中
4. CSS 样式可以按需引入，支持自定义主题
5. 确保项目中安装了所有必要的依赖和 loader

License

MIT