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">

PS:各字段值详解(贴链接):

https://www.cnblogs.com/laneyfu/p/9467784.html

浅谈http中的Cache-Control

但是这种方法貌似没什么作用,并没有解决我的问题

2、vue.config.js文件中配置,给每次打包的文件名后面添加一个哈希值,以供浏览器区分。

const timeStamp = new Date().getTime();
module.exports = {
    publicPath:"/",
    configureWebpack: { // webpack 配置
 output: { // 把应用打包成umd库格式
      library:'myLibrary', // 输出重构  打包编译后的文件名称  【模块名称.时间戳】
 filename: `[name].${timeStamp}.js`,
      libraryTarget:'umd',
      globalObject:'this',
    },
  },
}

这样每次打包出来的js文件都不一样,也就解决了浏览器的缓存问题。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容