Vue 打包上线后的缓存问题解决
更新时间：2023年11月29日 16:53:38 作者：乐辞
在使用vue脚手架搭建前端工程时,经常会遇到打包上线后的缓存问题,许多开发者会直接在index.html中加入类似以下代码来解决缓存问题,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
问题描述
在使用vue脚手架搭建前端工程时，经常会遇到打包上线后的缓存问题。具体表现为，当程序版本升级时，用户仍然访问到旧版本的页面。许多开发者会直接在index.html中加入类似以下代码来解决缓存问题：
<meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equiv="Cache" content="no-cache">
这种方法虽然解决了缓存问题，但却导致用户每次访问程序都需要重新请求服务器，无法利用静态资源的缓存，从而增加了流量消耗和网络压力。
需求澄清
实际上，我们需要解决的问题并不是简单地要缓存或不要缓存，而是希望根据情况灵活控制
- 每次程序升级后，用户不会因为缓存问题而访问到旧版本的程序。
- 如果程序没有升级，用户可以利用静态资源的缓存，减少对服务器的请求。
解决原理
在vue脚手架的每次打包过程中，会给生成的静态资源文件名添加哈希后缀，并 index.html中引入带有相应哈希后缀的静态资源文件。因此，每个版本的静态资源都是被正确引入的，不会因升级而出现缓存问题。因此，我们只需让index.html不被缓存，而让其他静态资源可以被缓存，即可满足需求。
然而，要实现让静态资源被缓存，但让index.html不被缓存，则需要借助服务器配置，通过设置针对index.html请求的header来控制缓存。
具体实现
Nginx服务器配置
如果你使用Nginx服务器，你可以简单地添加以下配置：
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}Apache服务器配置
如果你使用Apache服务器，你可以在VirtualHost中增加以下配置：
<Files "index.html">
Header set Cache-Control "no-cache, no-store"
</Files>修改webpack的配置文件
同时，你也可以通过修改webpack的配置文件来实现对静态资源文件名的哈希处理，以确保静态资源能够被有效缓存：
onst Timestamp = new Date().getTime();
// Vue.config.js 配置选项
module.exports = {
configureWebpack: { // webpack 配置
output: { // 输出重构 打包编译后的 文件名称:【模块名称.contenthash】使用contenthash保证了文件被修改才会重新生成新的文件名，让用户能有效使用浏览器缓存，减轻服务器压力
filename: `static/js/[name].[contenthash:8].js`,
chunkFilename: `static/js/[name].[contenthash:8].js`
},
}
}通过以上步骤，你可以灵活地控制缓存，让用户在程序升级后访问到最新版本的页面，同时减少了静态资源的重复请求，优化了用户体验和网络流量消耗。
到此这篇关于Vue 打包上线后的缓存问题的文章就介绍到这了,更多相关vue打包上线缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
循环使用v-for指令,v-for指令需要以site in sites形式的特殊语法,sites是源数据数组并且site是数组元素迭代的别名,下面这篇文章主要给大家介绍了关于Vue中v-for列表循环的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue中checkbox如何修改为圆形样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
本篇文章主要介绍了Vue 2.0的数据依赖实现原理代码简析，主要从初始化的数据层面上分析了Vue是如何管理依赖来到达数据的动态响应，有兴趣的可以了解一下2017-07-07
vue静态配置文件不进行编译的处理过程(在public中引入js)
这篇文章主要介绍了vue静态配置文件不进行编译的处理过程(在public中引入js)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本文主要介绍了vue中el-table合并列的具体实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
本文主要介绍了element中el-table局部刷新的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
Unity webgl嵌入到前端网页中,前端通过调用Unity webgl内方法实现需要展示的功能,前端点击Unity webgl内的交互点,Unity webgl返回给前端一些需要的数据,这篇文章主要介绍了Unity webgl 嵌入Vue实现过程,需要的朋友可以参考下2024-01-01
文章介绍了如何在Vue.js中获取URL参数、定义和暴露公共方法、在main.js中引入并注册到Vue实例原型,以及页面中调用这些方法,作者分享了个人经验,希望对大家有所帮助2024-12-12
在本篇文章里小编给大家整理的是关于Vue开发中遇到的跨域问题及解决方法，需要的朋友们可以学习下。2020-02-02
最新评论