vue解决发版后浏览器缓存问题

99 阅读1分钟

1.、在index.html入口文件处设置meta标签,清除页面缓存。

image.png 2、vue.config.js 配置js、css打包配置,在css、js打包文件添加版本号时间戳,区别版本 const path = require('path') const timeStamp= new Date().getTime() const isPro = process.env.NODE_ENV === 'production' module.exports = { configureWebpack: { output: { filename: js/[name].js?v=${timeStamp}, chunkFilename: js/[name].js?v=${timeStamp}, }, }, css: { // 输出重构 打包编译后的css文件名称,添加时间戳 extract: { filename: css/[name].${timeStamp}.css, chunkFilename: css/[name].${timeStamp}.css, }, } } 这样每次打包出来的js文件都不一样,也就解决了浏览器的缓存问题。

filename: 指列在 entry(入口) 中,打包后输出的文件的名称
chunkFilename: 指未列在 entry 中,却又需要被打包出来的文件的名称(懒加载的文件)