为 vuecli 项目增加新版本检测功能

安装

npm i vue-check-update-plugin -D

使用

// vue.config.js
const CheckUpdatePlugin = require('vue-check-update-plugin')
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'development') {
      config.plugins.push(
        new CheckUpdatePlugin({
          name: 'project-name-key', // 保持唯一
          version: '1.0.0', // 保持最新
          contents: ['修改了xxx Bug', '增加了xxx 新功能'] // 更新日志
        })
      )
    }
  }
}

// 在任意代码出调用此函数即可
Vue.prototype.$checkUpdate = function () {
  axios.get(window.location.origin + '/version.json?v=' + Date.now()).then(rsp => {
    const { version, title, contents } = rsp.data.data

    if (version === localStorage.getItem('project-name-key')) return

    this.$notify({
      title,
      duration: 0,
      showClose: true,
      dangerouslyUseHTMLString: true,
      message: contents.toString(),
      // 关闭后手动同步服务器上的最新版本号到本地
      onClose: () => window.syncVersion()
    })
  })
}

Props

| 参数名 | 说明 | 默认值 | | ----------- | --------------------------------------------- | ----------------- | | name | 唯一标识 (string/required) | - | | version | 更新的版本号(string/required) | - | | versionPath | 版本信息存放文件路径(string) | dist/version.json | | template | html 模板路径(string) | dist/index.html | | title | 版本更新大标题(string) | - | | syncName | 同步最新版本号函数名(string) window[syncName] | syncVersion | | contents | 版本更新日志(string[]) | [] |