vue项目打包部署，自动清理缓存

1、在 package.json 文件中有个 version 版本号的属性，在每次打包部署前修改当前的版本号
2、在 main.js 中修改版本号，将版本号存在浏览器缓存中，如果版本号不一致，就重新加载

// vue每次版本更新强刷页面
const version = require('../package.json').version
const versionStorage = localStorage.getItem('version')
console.customLog('最新版本', 'v' + version)
console.customLog('缓存版本', 'v' + versionStorage)

if (version != versionStorage) {
  localStorage.clear()
  localStorage.setItem('version', version)
  console.customLog('版本不一致，清除缓存中')
  //location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，
  //当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。
  setTimeout(() => {
    window.location.reload(true)
  }, 1000)
}

3、给文件名后面添加 hash 值，确保文件名都是最新的，从而清除缓存
4、在 vue.config.js 文件中修改

// 创建hash
const hash = 'v' + require('./package.json').version + '.' + new Date().getTime()

// 给js文件添加hash 
configureWebpack:{
	 output: {
      filename: `js/[name].${hash}.js`,
      chunkFilename: `js/[name].${hash}.js?hash=${hash}`
    }
}
// 给css文件添加hash
css:{
	 extract: {
      // 打包后css文件名称添加时间戳
      filename: `css/[name].${hash}.css`,
      chunkFilename: `css/[name].${hash}.css?hash=${hash}`
    }
}
// 给图片的文件名添加hash
 config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        return {
          //4kb以下图片会被编译成base64 嵌入到css中（可以减少资源请求数量）
          //4kb以上url-loader表现行为等同于file-loader，会走文件资源请求
          limit: 4096,
          // test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          fallback: {
            loader: 'file-loader',
            options: {
              name: `img/[name].${hash}.[ext]`
            }
          }
        }
      })