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

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

const path = require('path')
const webpack = require('webpack')
const timeStamp = new Date().getTime()
module.exports = {
  publicPath: './',
  // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.
  filenameHashing: false,
 
  // 将构建好的文件输出到哪里
  outputDir: 'dist',
  
  configureWebpack: { // 重点
    // 输出重构 打包编译后的js文件名称,添加时间戳.
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/chunk.[id].${timeStamp}.js`,
    }
  },
 
  css: { //重点.
    extract: { // 打包后css文件名称添加时间戳
      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

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    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}`,
    }
  },

这样就可以啦！！！