vue 用webpack 打包的时候添加版本号

因浏览器缓存原因导致vue 打包的文件导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。const version = new Date().getTime()方法一：module.exports = {configureWebpack: { // webpack 配置output: { // 输出重构打包编译后的文件名称【模块名...

leechua

3197人浏览 · 2022-03-23 16:15:33

leechua · 2022-03-23 16:15:33 发布

因浏览器缓存原因导致vue 打包的文件导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。

const version = new Date().getTime()

方法一：

module.exports = {
  configureWebpack: { // webpack 配置
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `[name].${process.env.VUE_APP_Version}.${version }.js`,
      chunkFilename: `[name].${process.env.VUE_APP_Version}.${version}.js`
    },
  },
...
}

方法二：

module.exports = {
  //给js添加版本号
  configureWebpack:(config) => {
      config.output.filename = `static/js/[name].${version}.js`;
      config.output.chunkFilename = `static/js/[name].${version}.js`
  },
  //给css添加版本号
  chainWebpack: config => {
       // 清除css，js版本号
       // config.output.filename('static/js/[name].js').end();
       // config.output.chunkFilename('static/js/[name].js').end();
       // 为生产环境修改配置...
       config.plugin('extract-css').tap(args => [{
            filename: `static/css/[name].${version}.css`,
            chunkFilename: `static/css/[name].${version}.css`
       }])
  }
...
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^