解决vue前端发版后要刷新才能看到更新的问题

1.在静态文件public下创建version.json文件,每次发版前修改下version版本号

{
    "version": "1.1.0"
}

2.创建getVersion.js文件,发版后,从version.json中拿到的版本号与存储在本地的版本号做比较.若不相同,刷新系统,将新获取的版本号存至本地

import request from './request'
import message from 'ant-design-vue/es/message'
import storage from 'store'
// 获取版本号
export function checkVersion () {
  request(`${ window.location.origin}/version.json`, { headers: { 'Cache-Control': 'no-cache' } }) // 反正就是要请求到json文件的内容, 并且禁止缓存
    .then((res) => {
      const version = res.version
      const clientVersion = storage.get('_version_')
      if (!clientVersion) {
        storage.set('_version_', version)
        return
      }
      // 和最新版本不同，刷新页面
      if (version !== clientVersion) {
        storage.set('_version_', version)
        const hide = message.loading('加载中……', 0)
        setTimeout(hide, 2000)
        setTimeout(() => {
          window.location.reload()
        }, 2000)
      }
    })
}