vue项目打包部署后 欣赏器自动清除缓存题目（办理方法） ...

vue打包部署后 欣赏器缓存题目，导致控制台报错ChunkLoadError: Loading chunk failed的办理方案

一、报错如下：
每次build打包部署到服务器上时，偶尔会出现前端资源文件不能及时更新到最新，欣赏器存在缓存题目，这时在当前页面进行按钮点击等变乱处理处罚时，控制台报错chunk load error，如下表现：

原因：通过查察当前sources里的文件，可以发现：控制台报错提示中所请求的js文件哈希值跟sources缓存的文件哈希值并不一样，阐明 当前页面请求了缓存，然而由于资源文件被更新 导致找不到 出现404的情况。
直接办理办法：清除欣赏器缓存。（但是每次部署 都要让用户重新清一次缓存不是很友爱）下面通过其他方式办理这个题目。
二、办理：
1、在index.html入口文件处设置meta标签，清除页面缓存。

1. <meta http-equiv="pragma" content="no-cache">
2. <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
3. <meta http-equiv="expires" content="0">

复制代码

2、vue.config.js 配置js、css打包配置，在css、js打包文件添加版本号时间戳，区别版本

1. const path = require('path')
2. const timeStamp= new Date().getTime()
3. const isPro = process.env.NODE_ENV === 'production'
4. module.exports = {
5.   configureWebpack: {
6.     output: {
7.       filename: `js/[name].js?v=${timeStamp}`,
8.       chunkFilename: `js/[name].js?v=${timeStamp}`,
9.     },
10.   },
11. css: {
12.     // 输出重构 打包编译后的css文件名称，添加时间戳
13.     extract: {
14.       filename: `css/[name].${timeStamp}.css`,
15.       chunkFilename: `css/[name].${timeStamp}.css`,
16.     },
17.   }
18. }

复制代码

如许每次打包出来的js文件都不一样，也就办理了欣赏器的缓存题目。
Tips

filename： 指列在 entry（入口） 中，打包后输出的文件的名称
chunkFilename： 指未列在 entry 中，却又需要被打包出来的文件的名称（懒加载的文件）
3.打包测试

发现 JS 后参数带上我设置的时间戳啦，测试乐成。
清除欣赏器 localStorage 缓存

1、更新package.json中的 version 值，每次打包往上递增
2、main.js中，根据 version 判断是否进行缓存清理

1. const VUE_APP_VERSION = require('../package.json').version
2. const vers = window.localStorage.getItem('appVersion')
3. if(VUE_APP_VERSION != vers){
4.   localStorage.clear()
5.   window.localStorage.setItem('appVersion', VUE_APP_VERSION)
6.   location.reload()
7. }

复制代码

Tips

偶然版本不一样，可以找webpack.prod.conf文件进行修改噢~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。