vue项目发布有缓存正式环境不更新的解决方案
前言:每次测试构建或者打包更新版本发到服务器上,导致偶尔会出现不能及时更新到最新代码,浏览器存在缓存的问题。
一、js、css文件防缓存
定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ,实际上不用加时间戳,webpack内部还自动变化hash值
output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].'+_Version+'js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+_Version+'js') }
二、html文件防缓存
方法1、Linux服务器设置nginx禁用html缓存
在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apache不缓存配置和nginx不缓存配置的设置。在常用的缓存设置里面有两种方式,都是使用add_header来设置:分别为Cache-Control和Pragma。
add_header Cache-Control no-store;
add_header Pragma no-cache;
server { listen 80; server_name test.exmaple.cn; location / { if ($request_filename ~* .*\.(?:htm|html)$) ## 配置页面不缓存html和htm结尾的文件 { add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; } root /web/; index index.html; try_files $uri $uri/ /index.html =404; } }
方法2、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">
方法3、(Vue-cli前端代码控制)
1.在public静态目录下新建version.json每次发版更改里面的版本号
{ "version": "0.0.1" }
2.在src中新建 libs/versionUpdate.js文件
import axios from 'axios' const isNewVersion = () => { let url = `//${window.location.host}/version.json?t=${new Date().getTime()}` axios.get(url).then(res => { if (res.status === 200) { let vueVersion = res.data.version || '1.0.0' let localVueVersion = localStorage.getItem('vueVersion') localStorage.setItem('vueVersion', vueVersion) if (localVueVersion && localVueVersion != vueVersion) { alert('检测到新版本,请点击确认刷新页面哦') window.location.reload(true) return } } }) } export default { isNewVersion }
3.在全局路由拦截中写,只要每次版本号不同就重新加载页面配合第一步就可以清楚浏览器缓存
import versionTood from '@/libs/versionUpdate' router.beforeEach(( to, from, next ) => { //判断当前代码版本是否与服务器中代码版本一致,如不一致则刷新页面获取最新 versionTood.isNewVersion(); }
总结
到此这篇关于vue项目发布有缓存正式环境不更新的解决方案的文章就介绍到这了,更多相关vue项目发布有缓存解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Element-UI 解决el-table中图片悬浮被遮挡问题小结
在开发中,发现element-ui在el-table中添加图片悬浮显示时,会被单元格遮挡的问题,对于此问题解决其实也并不难,将悬浮图片放在body节点下,通过定位显示即可,感兴趣的朋友跟随小编一起看看吧2024-06-06前端在el-dialog中嵌套多个el-dialog代码实现
最近使用vue+elementUI做项目,使用过程中很多地方会用到dialog这个组件,有好几个地方用到了dialog的嵌套,下面这篇文章主要给大家介绍了关于前端在el-dialog中嵌套多个el-dialog代码实现的相关资料,需要的朋友可以参考下2024-01-01
最新评论