VUE项目打包部署后，如何更新本地缓存并通知用户？不知道大家有没有遇到过这么一个场景。项目重新打包部署后，需要清空/更新

背景

不知道大家有没有遇到过这么一个场景。项目重新打包部署后，需要清空/更新本地缓存，并通知用户。

举个例就拿我做的项目来说吧，领导提了一个需求实现动态工具栏，要求根据用户使用习惯排序、支持自定义顺序、支持快捷键操作；主要的实现思路就是利用“LocalStorage”，将工具栏顺序保存到缓存中，操作缓存数据就行了。当用户刷新页面我们只需要从缓存中取数据就行；具体实现逻辑我将在后续章节更新。

开发过程中考虑到一个问题，假如后期产品要求再增加一个工具项咋办，这时项目都上线了，总不能给用户打电话，教人家怎么删除本地旧的LocalStorage数据吧，显然这是不允许的。那我们能不能在新功能上线后更新旧缓存，并通知用户呢？

实现思路

每一次发版我们都会加一个版本号，那我们是不是可以通过匹配版本号，从而解决这个问题呢。

实现代码

在package.json中修改/添加version：

{
  "name": "my-app",
  "version": "1.0.0",
}

在vue.config.js注册版本号：

const APP_NAME = require('./package.json').name

// 注册发布版本号
process.env.VUE_APP_VERSION = VERSION

在需要的地方使用，以route.beforeEach为例：

router.beforeEach((to, from, next) => {
  // 当前发布版本号
  const currrentVersion = process.env.VUE_APP_VERSION
  // 当前本地缓存版本号
  const localVersion = localStorage.getItem('version')
  if (currrentVersion != localVersion) {
    // 清除｜更新缓存，通知用户
    ...
    // 重新更新本地版本号
    localStorage.setItem('version', currrentVersion)
  }
  next()
})

最后

文章暂时就写到这，写作不易，如果本文对您有什么帮助，别忘了动动手指点个赞❤️。本文如果有错误和不足之处，欢迎大家在评论区指出，多多提出您宝贵的意见！