当前位置：首页 > article >正文

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

article 2024/11/20 19:37:40

Vue打包后部署缓存问题[ 配置vue.config.js ]

1. 处理思路：添加时间戳
2. 涉及知识点
- 1. `url-loader`
- 2. `file-loader`
3. 参考代码

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

打包后的js文件名添加时间戳
- 打包后的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
      })
  }
}