Vue项目：解决每次发版后要清理浏览器缓存问题

在Vue项目开发过程中，如何解决每次发版后要清理浏览器缓存问题。

最近项目更新频繁,每次一更新客户都说还跟之前的一样,一查原因是因为客户没有清空浏览器的缓存,所以为了方便客户看到最新版本,开始调研再发布新版本后自动清理缓存,这篇文章主要给大家介绍了关于Vue项目每次发版后要清理浏览器缓存问题的解决办法,需要的朋友可以参考下

打包的时候给每个打包文件后面加一个时间戳，通过 vue.config.js 配置

const timeStamp = new Date().getTime()
module.exports = {
  // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.
  filenameHashing: false,
  configureWebpack: {
    // 输出重构 打包编译后的js文件名称,添加时间戳
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/chunk.[id].${timeStamp}.js`,
    },
  },
  css: {
    // 打包后css文件名称添加时间戳
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/chunk.[id].${timeStamp}.css`,
    },
  },
}

这样可以解决问题，每次打包发布之后，项目不需要强制清理缓存就可以试试更新内容了。但是这时候又有一个新问题产生。 就是这样打包完发布之后，因为每次的文件名不一样，项目中偶尔会报错 ChunkLoadError: Loading chunk failed。原因就是浏览器取的是缓存中的文件名称，新打包之后，文件名称改变，导致浏览器找不到文件了 404。需要刷新页面，重新加载文件。

先说一下单独解决这个问题的方法

// 在main.js中
/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */
router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  const targetPath = router.history.pending.fullPath
  if (isChunkLoadFailed) {
    // 用路由的replace方法，
    // 并没有相当于F5刷新页面，
    // 失败的js文件并没有从新请求，
    // 会导致一直尝试replace页面导致死循环，
    // 而用 location.reload 方法，相当于触发F5刷新页面，
    // 虽然用户体验上来说会有刷新加载察觉，但不会导致页面卡死及死循环，
    // 从而曲线救国解决该问题
    window.location.reload()
    // router.replace(targetPath);
  } else {
    console.log('no')
  }
})

当捕获到 Loading chunk {n} failed 的错误时我们重新渲染目标页面，这种实现明显更简单和友好。

结合我们上面的问题，想到了一个新的解决方式，在打包的时候，文件名称不变，使用版本号。这样也可以实现每次打包发布后不需要强制清理缓存，又不会出现找不到文件的情况

在 vue.config.js 中，将 name.timeStamp.js 改成 name.js?v=timeStamp

const timeStamp = new Date().getTime()
module.exports = {
  configureWebpack: {
    output: {
      filename: `js/[name].js?v=${timeStamp}`,
      chunkFilename: `js/chunk.[id].js?v=${timeStamp}`,
    },
  },
  css: {
    extract: {
      filename: `css/[name].css?v=${timeStamp}`,
      chunkFilename: `css/chunk.[id].css?v=${timeStamp}`,
    },
  },