打包的时候给每个打包文件后面加一个时间戳,通过 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}`,
    },
  },

总结 

到此这篇关于Vue项目每次发版后要清理浏览器缓存问题解决的文章就介绍到这了,更多相关Vue发版后要清理浏览器缓存内容请搜索代码部落以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码部落!