简单代码就可以为 vuecli 项目实现检测新版本功能

当发布新版本后用户本地经常会有缓存情况, 为了让用户知道产品是否有新版本推送并不值得集成websocket长链接, 所以用一种更简单的方式来实现用户端新版本检测

安装插件

npm i vue-check-update-plugin -D

第一步

// vue.config.js
// 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 新功能'] // 更新日志
        })
      )
    }
  }
}

第二步

// main.js
// 在任意代码出调用此函数即可
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()
    })
  })
}

最后

<template>
	<button @click="$checkUpdate">检测新版本</button>
</template>

效果图

其他

• 仓库地址
• Npm 地址