首页 > Vue >

vue自动清缓存,js、css、png图片等打包build文件名加时间戳的方法

时间: 作者:admin 浏览:

为了每次更新的时候vue项目的所有文件都能使用最新文件,防止浏览器读取缓存而导致打开还是旧页面信息的问题,想到了每次打包的时候在文件名上加上时间戳的办法,以下是vue.config.js以及webpack的配置:

const timeStamp = new Date().Format('yyyyMMddhhmmss')
module.exports = {
//图片类
    chainWebpack:  (config)=>{
        config.module.rule('image').use('url-loader').tap((options)=>{
            options.name = `static/img/[name].${timeStamp}.[ext]`
            options.fallback = {
                options: {
                    name:  `static/img/[name].${timeStamp}.[ext]`
                }
            }
            return options
        })
    },
    //CSS类
    css: {
        extract: {
            filename: `static/css/[name].${timeStamp}.css`,
            chunkFilename: `static/css/[name].${timeStamp}.css`
        }
    },
    //JS类
    configureWebpack: {
        output: {
            filename: `static/js/[name].${timeStamp}.js`,
            chunkFilename: `static/js/[name].${timeStamp}.js`
        }
    }
}

大功告成,作业照抄,不过小编发现图片类的svg图片不能生效,普通png、jpg、gif等都是可以的;赶紧试试吧

微信公众号
微信公众号:
  • 前端全栈之路(微信群)
前端QQ交流群
前端QQ交流群:
  • 794324979
  • 734802480(已满)

更多文章

栏目文章


Copyright © 2014-2023 seozhijia.net 版权所有-粤ICP备13087626号-4