怎么在vue中增加强缓存和版本号-创新互联

怎么在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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

看完上述内容，你们掌握怎么在vue中增加强缓存和版本号的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！