Vue打包后部署缓存问题处理方式

1. 处理思路：添加时间戳

1. 打包后的js文件名添加时间戳
2. • 打包后的css文件名添加时间戳
   • • 打包后的Img文件名添加时间戳

2. 涉及知识点

1. url-loader

• url-loader: Git文档地址

• url-loader 属性

Name	Type	Default	Description
limit	{Boolean|Number|String}	true	指定文件的最大大小（以字节为单位）.
mimetype	{Boolean|String}	based from mime-types	设置要转换的文件的MIME类型.
encoding	{Boolean|String}	base64	指定将与文件内联的编码.
generator	{Function}	() => type/subtype;encoding,base64_data	创建自己的自定义实现来编码数据.
fallback	{String}	file-loader	指定当目标文件的大小超过限制时要使用的备用加载程序.
esModule	{Boolean}	true	使用ES模块语法.

2. file-loader

• url-loader内部封装了file-loader

3. 参考代码

• /vue.config.js

const timeStamp = new Date().getTime()
module.exports = {
  devServer: {},
  configureWebpack: {
  // 打包后.js文件名添加时间戳,存放在js/
  // webpack打包的时候只会处理JS之间的依赖关系;下方处理css
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/[name].${timeStamp}.js`,
    }
  },
  css: {
    // 输出重构 打包编译后的css文件名称，添加时间戳,存放在css/
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/[name].${timeStamp}.css`,
    }
  },
  chainWebpack(config) {
  // 打包后图片文件名添加时间戳,存放在img/
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        options.name = `img/[name].${timeStamp}.[ext]`
        options.fallback = {
          loader: 'file-loader',
          options: {
            name: `img/[name].${timeStamp}.[ext]`
          }
        }
        return options
      })
  }
}