vue 项目检测新版本功能

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

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

安装插件

npm i vue-check-update-plugin -D

第一步

// vue.config.js
const CheckUpdatePlugin = require('vue-check-update-plugin')
const isDevelopment = process.env.NODE_ENV === 'development'
module.exports = {
  configureWebpack: config => {
    if (!isDevelopment) {
      config.plugins.push(
      // 如果需要通知用户端有新版本, 请更新 package.json version 的值
        new CheckUpdatePlugin({
          name: 'project-name-key', // 版本名称
          versionPath: 'dist/version.json', // 版本信息文件写入路径
          htmlPath: 'dist/index.html', // html 文件路径
          title: '新版本提示', // 新版本标题
          syncFunctionName: 'syncVersionNumber', // 注入到html中的全局函数
          content: ['修改了xxx Bug', '增加了xxx 新功能'] // 新版本更新日志
        })
      )
    }
  }
}

第二步

// main.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$checkUpdate = function() {
  axios.get(window.location.origin + '/version.json?v=' + Date.now()).then(rsp => {
    // 插件提供的数据
    const { version, title, content, date } = rsp.data.data
    // project-name-key 需要与插件name值一致
    if (version === localStorage.getItem('project-name-key')) return console.log('当前版本是最新版本')

    // 检测到新版本

    this.$notify({
      title,
      duration: 0,
      showClose: true,
      dangerouslyUseHTMLString: true,
      message: content.toString(),
      // 关闭后同步版本号到本地
      onClose: () => window.syncVersionNumber()
    })
  })
}

最后

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

效果图

其他

• 仓库地址
• Npm 地址