从品牌网站建设到网络营销策划,从策略到执行的一站式服务
怎么在vue中增加强缓存和版本号?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了商水免费建站欢迎大家使用!强缓存:
强缓存实现:
cache-control: max-age=315360000, public ,immutable
客户端和代理服务器都可以缓存该资源,在315360000秒(10年)的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,即使用户做了刷新操作,也不向服务器发起http请求
参考文章"彻底弄懂强缓存与协商缓存"
index.html文件采用协商缓存,理由就是要用户每次请求index.html不拿浏览器缓存,直接请求服务器,这样就保证资源更新了,切记不要设置强缓存!!!
其他资源采用强缓存 + 协商缓存,理由就不多说了。
nginx配置
版本号管理在
.env.production 生产模式
.env.test 测试模式
VUE_APP_VERSION = T0.01 测试模式 VUE_APP_VERSION = V0.01 生产模式
在package.json配置了打包命令
npm run build 正式环境配V0.01版本号 npm run build:test 测试环境配T0.01版本号
通过webpack打包设置,name+版本号+时间戳.js
可以根据服务器设置强缓存,缓存静态文件
configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js`, chunkFilename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js`, }, }Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
看完上述内容,你们掌握怎么在vue中增加强缓存和版本号的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图