VUE vue-cli3配置打包后的文件加上版本号

html-css011

VUE vue-cli3配置打包后的文件加上版本号,第1张

const Timestamp = new Date().getTime()

module.exports = {

    // webpack配置

    chainWebpack: config =>{

        if (process.env.NODE_ENV === 'production') {

            // 给js和css配置版本号

            config.output.filename('js/[name].' + Timestamp + '.js').end()

            config.output.chunkFilename('js/[name].' + Timestamp + '.js').end()

            config.plugin('extract-css').tap(args =>[{

                filename: `css/[name].${Timestamp}.css`,

                chunkFilename: `css/[name].${Timestamp}.css`

            }])

        }

    }

}

这是因为浏览器默认是有缓存的。

解决方法：调试前清除浏览器缓存，在浏览器设置界面中或使用快捷键直接清理缓存ctrl+shift+delete。

浏览器会缓存css或js文件，通过设置和改变版本号，浏览器就会重新下载新的js或css文件，在js或css后加?v=版本号的用法如下：css和js带参数(形如.css?v=与.js?v=或.css?version=与.js?version=)。