we网站更新提示-只需三步

思路

定时获取版本号，对比第一次进入网站时获取的版本号

版本号获取方式

接口或者前端静态文件

需修改或增加三个文件目录，如图

在静态文件目录中新组 version.json

    {
      "version":"1.0.6"
    }

然后在App.vue 添加如下代码

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data() {
    return {
      version: '',
      timer: null
    }
  },
  mounted() {
    this.getVersion(1) //第一次获取版本号并存入
    this.timer = setInterval(() => { //定时获取并对比之前的版本号
      this.getVersion()
    }, 5000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getVersion(flag = 0) {
      axios.get('./config/version.json',
        {
          headers: {
            'Cache-Control': 'no-cache' 
          }
        }).then(res => {
        const version = res.data.version || '1.0.0'
        if (flag === 1) {
          this.version = version
          return
        }
        if (version !== this.version) { //不一致，表示前端包已被更新
          this.$notify({
            title: '温馨提示',
            type: 'warning',
            showClose: true,
            dangerouslyUseHTMLString: true,
            duration: 0,
            message: `<div class="com-notice">检测到新版本，是否更新？ <a  id="com-update" style="margin-left:10px;color:#1655c9;text-decoration: underline;font-style: italic;">去更新</a>  </div>`,
            position: 'bottom-right',
            customClass: 'custom-notify',
            onClose: () => {
              clearInterval(this.timer)
            }
          })
          this.version = version
          document.getElementById('com-update').addEventListener('click', event => {
            this.handleClickWrapper()
          })
        } else {
          this.version = version
        }
      }).catch(() => {
        this.timer && clearInterval(this.timer)
      })
    },
    handleClickWrapper() {
      window.location.reload(true)
    }
  }
}
</script>
<style lang="scss">
</style>

现在，最后一步，为了不用每次打包都需要修改version.json，在vue.config.js做如下修改

打包完成后执行覆写version.json操作

const fs = require('fs')
const path = require('path')

// 自定义打包完成回调插件
class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('MyPlugin', () => {
      // 在这里执行打包完成后的操作
      const now = new Date().getTime()
      const version = {
        version: now
      }
      const versionPath = path.join(__dirname, './operation/config/version.json')  //operation是指打包后的文件夹的名称
      console.log('🚀 ~ MyPlugin ~ compiler.hooks.done.tap ~ versionPath:', versionPath)

      fs.writeFileSync(versionPath, JSON.stringify(version), 'utf8', (err) => {
        if (err) {
          console.log('写入失败')
        } else {
          console.log('写入成功')
        }
      })
    })
  }
}

module.exports = {
      configureWebpack: {
        resolve: {
          alias: {
            '@': resolve('src'),
          }
        },
        plugins: [
          new MyPlugin() //引入插件
        ],
        output: {
          library: packageName,
          libraryTarget: 'umd', // 把微应用打包成 umd 库格式
          jsonpFunction: `webpackJsonp_${packageName}`,
          filename: `js/[name]-${new Date().getTime()}.js`,
          chunkFilename: `js/[name]-${new Date().getTime()}.js`
        }
      }
  
}

效果