Vue项目打包部署后浏览器自动清除缓存问题的解决方法
更新时间：2024年12月11日 10:05:20 作者：web13508588635
这篇文章主要介绍了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文件都不一样，也就解决了浏览器的缓存问题。
Tips
filename： 指列在 entry（入口） 中，打包后输出的文件的名称chunkFilename： 指未列在 entry 中，却又需要被打包出来的文件的名称（懒加载的文件）
三.打包测试
发现 JS 后参数带上我设置的时间戳啦，测试成功。
清除浏览器 localStorage 缓存
1、更新package.json中的 version 值，每次打包往上递增
2、main.js中，根据 version 判断是否进行缓存清理
const VUE_APP_VERSION = require('../package.json').version
const vers = window.localStorage.getItem('appVersion')
if(VUE_APP_VERSION != vers){
localStorage.clear()
window.localStorage.setItem('appVersion', VUE_APP_VERSION)
location.reload()
}
Tips
有时版本不一样，可以找webpack.prod.conf文件进行修改噢~
到此这篇关于Vue项目打包部署后浏览器自动清除缓存问题的解决方法的文章就介绍到这了,更多相关Vue浏览器自动清除缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中下拉框组件的封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
VueFlow是一个专门为Vue.js框架设计的交互式可视化库,它允许开发者轻松创建和管理复杂的图形模型,如流程图、状态机、组织结构图等,本文给大家介绍了Vue3实现vueFLow流程组件的详细指南,需要的朋友可以参考下2024-11-11
Vue Vine提供了全新Vue组件书写方式,主要的卖点是可以在一个文件里面写多个vue组件,Vue Vine是一个vite插件,vite解析每个模块时都会触发插件的transform钩子函数,本文介绍Vue Vine是如何实现一个文件中写多个组件,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要向大家分享的是Vue 中插槽的使用总结，包括内容有默认插槽、具名插槽、作用域插槽等内容，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
这篇文章主要为大家介绍了可控制缓存销毁的 keepAlive 组件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了如何封装Vue Element的table表格组件，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-02-02
本篇文章主要介绍了详解Vue爬坑之vuex初识 ，Vue 的状态管理工具 Vuex可以解决大型项目中子组件之间传递数据，有兴趣的可以了解下2017-06-06
在开发工作过程中，我们会遇到各种各样的表格数据导入，动态数据导入可以减少人为操作，减少出错。本文为大家介绍了Vue3实现动态导入Excel表格数据的方法，需要的可以参考一下2022-11-11
这篇文章主要介绍了vue中关于this.refs为空出现原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了Vue2递归组件实现树形菜单的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
最新评论