vue项目中禁用浏览器缓存配置案例
更新时间：2021年09月11日 14:39:41 作者：多纤果冻
这篇文章主要介绍了vue项目中禁用浏览器缓存配置案例,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
项目发布版本会遇到经常需要清理缓存的问题,以下是项目禁用缓存的实际方法
1.public文件夹中修改 index.html文件meta配置
<meta http-equiv="pragram" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="expires" content="0" />
2.vue cli 构建配置(针对vue3以下版本)
在vue.config.js新增配置
const Timestamp = new Date().getTime()
module.exports = {
configureWebpack: {
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号(可选).时间戳】
filename: `[name].${Timestamp}.js`,
chunkFilename: `[name].${Timestamp}.js`
},
},
css: {
extract: { // 打包后css文件名称添加时间戳
filename: `css/[name].${Timestamp}.css`,
chunkFilename: `css/[name].${Timestamp}.css`
}
},
}
3.Nginx配置
禁用掉nginx缓存，让浏览器每次到服务器去请求文件，而不是在浏览器中读取缓存文件。
当程序调试好上线后,可以开启nginx缓存,节省服务器的带宽流量，减少一些请求，降低服务器的压力。
在nginx.conf文件里配置html文件默认加header 不缓存配置
以下实际项目中nginx缓存配置
location ~ .*\.(?:htm|html)$ {
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
Nginx静态资源缓存设置 https://www.jb51.net/article/222620.htm
到此这篇关于vue项目中禁用浏览器缓存配置案例的文章就介绍到这了,更多相关vue项目中禁用浏览器缓存配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性,下面这篇文章主要给大家介绍了关于Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了区分vue-router的hash和history模式，帮助大家更好的理解和学习vue路由，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了vue实现列表拖拽排序的功能，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-11-11
这篇文章主要给大家介绍了关于Vue实现模糊查询的简单方法,在vue中,前端模糊搜索主要是用computed属性实现,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍了VUE Elemen-ui之穿梭框使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
今天小编就为大家分享一篇vue单页面应用打开新窗口显示跳转页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在开发基于Vue.js的应用时,随着项目规模的扩大,单个文件的体积也会随之增长,特别是当涉及到大量的依赖库和复杂的业务逻辑时,本文将详细介绍如何使用Webpack来优化Vue项目的打包流程,需要的朋友可以参考下2024-09-09
vue配置代理vue.config.js后不生效的解决(小坑)
这篇文章主要介绍了vue配置代理vue.config.js后不生效的解决(小坑)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
今天很郁闷，遇到这样一个奇葩问题，使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错误，折腾半天才解决好，下面小编把Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案分享给大家，需要的朋友一起看看吧2018-05-05
这篇文章主要介绍了vue2结合echarts实现一个地图的效果,本文通过实例代码给大家介绍的非常详细,对大家何用vue和echarts实现一个地图有一定的帮助,感兴趣的朋友一起看看吧2024-03-03
最新评论