vue打包部署后 浏览器缓存问题,导致控制台报错ChunkLoadError: Loading chunk failed的解决方案
一、报错如下:
每次build打包部署到服务器上时,偶尔会出现前端资源文件不能及时更新到最新,浏览器存在缓存问题,这时在当前页面进行按钮点击等事件处理时,控制台报错chunk load error,如下显示:
原因:通过查看当前sources里的文件,可以发现:控制台报错提示中所请求的js文件哈希值跟sources缓存的文件哈希值并不一样,说明 当前页面请求了缓存,然而由于资源文件被更新 导致找不到 出现404的情况。
直接解决办法:清除浏览器缓存。(但是每次部署 都要让用户重新清一次缓存不是很友好)下面通过其他方式解决这个问题。
二、解决:
1、在index.html入口文件处设置meta标签,清除页面缓存。
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
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文件都不一样,也就解决了浏览器的缓存问题。