当前位置:首页 > 经验笔记 > VUE > 正文内容

vue 用webpack 打包的时候添加版本号, VUE 项目更新部署时,浏览器页面缓存问题

han32684年前 (2022-07-12)VUE6759

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

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、<vue-link>标签实现新窗口打开    官方文档中说 v-link 指令被 <rou...

基于Vue的移动端图片裁剪组件(vue-imgcut)

基于Vue的移动端图片裁剪组件(vue-imgcut)

安装:npm install vue-imgcut –save使用代码:<template>     <div...

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

安装:Bashnpm install --save clipic使用代码:Markup<template>     ...

vue 弹框使用this.$emit调用父组件方法及传参 无效 (已解决) this.$parent

// 在子组件中调用父组件的method1方法 this.$parent.method1() // 获取父组件属性值 this.$parent.prop...