关于打包是图片的缓存问题优化

现象:

我替换了图片之后, 在进行打包, 过后浏览器显示的还是之前的画面, 或者空白, 需要清空下缓存才能看到最新的页面

原因: 默认是用的hash模式打包, 主要是图片的缓存问题
进行 npm run build 之后

image.png

打包后的文件: name+ hash

image.png

如果是一样的图片, 那么打包后的名称是一样的, 所以会有缓存问题

想要的效果:
每次打包后, 得到的都是最新的页面, 不要缓存, 让用户重新加载, 因此想到了时间戳的方式, 给每个打包后的问题取名 name+时间戳, 这样就能保证每次打包后的文件都是新的, 不会出现缓存问题
类似下面这样

image.png

出现新的问题:

如果我在两个文件夹里面 弄一样的文件名称, 那么打包后会覆盖掉,
比如这里的actJH_share1 ... 2,3,4 这四张图片, 和demo文件夹的命名是一样的, 打包后会覆盖, 即使两张actJH_share1 是不一样的, 打包后依然只有一样图片

image.png image.png

想要的效果:

不同路径下的同一名称图片应该算多张而不是一张

image.png

解决方式:

vue.config.js 如下配置即可实现想要的效果, name+hash:7+时间戳, 保证每次打包所有的文件都会进行更新, 而不会去读取缓存数据

const Version = new Date().getTime()
module.exports = {
    publicPath: "./",
    productionSourceMap: false,
  /**
   * 打包的时候解决缓存问题
   */
    css: {
      // 是否使用css分离插件 ExtractTextPlugin
      extract: {
        // 修改打包后css文件名   // css打包文件，添加时间戳
        filename: `static/css/[name].${Version}.css`,   // 此处static/css/xxx 目录根据自己打包情况来定,我使用的就没有static一层,所以直接去掉static即可。根据自己项目决定
        chunkFilename: `static/css/[name].${Version}.css`
      }
    },
    configureWebpack: {
      output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
        // filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
        // chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
        filename: `static/js/[name].${Version}.js`,         // js打包文件，添加时间戳
        chunkFilename: `static/js/[name].${Version}.js`
      }
    },
    chainWebpack(config) {
      // img的文件名修改   // img打包文件，添加时间戳
      config.module
        .rule('images')
        .use('url-loader')
        .tap(options => {
          options.name = `static/img/[name][hash:7]${Version}.[ext]`
          options.fallback = {
            loader: 'file-loader',
            options: {
              name: `static/img/[name][hash:7]${Version}.[ext]`
            }
          }
          return options
        })
    }
}