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

为了每次更新的时候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等都是可以的；赶紧试试吧