vue项目使浏览器不缓存页面,vue项目清除缓存

  vue项目使浏览器不缓存页面,vue项目清除缓存

  本文主要介绍在vue项目中禁用浏览器缓存配置的案例。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容,有需要的朋友可以参考一下。

  项目发布版本会遇到经常需要清理缓存的问题,以下是项目禁用缓存的实际方法

  1.public文件夹中修改 index.html文件meta配置

  meta http-equiv= program 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=新日期()。getTime()

  模块.导出={

  configureWebpack: {

  Output: {//输出重构包编译后的文件名[模块名。版本号(可选)。时间戳]

  文件名:`[名称]。${Timestamp}.js `,

  chunk filename:`[名称]。${Timestamp}.js `文件

  },

  },

  css: {

  Extract: {//在打包的css文件名中添加时间戳

  文件名:` css/[name]。${Timestamp}.css `,

  chunkFilename: `css/[name]。${Timestamp}.css `文件

  }

  },

  }

  3.Nginx配置

  禁用nginx缓存,这样浏览器每次都可以向服务器请求文件,而不是读取浏览器中的缓存文件。

  程序调试上线时,可以打开nginx缓存,这样可以节省服务器的带宽流量,减少一些请求,减轻服务器的压力。

  默认情况下在nginx.conf文件中配置带头文件的html文件,不缓存配置。

  以下实际项目中的Nginx缓存配置

  位置~。*\.(?htmhtml)$ {

  add _ header Cache-Control private,no-store,no-cache,must-revalidate,proxy-re validate ;

  }

  Nginx静态资源缓存设置https://www.jb51.net/article/222620.htm

  关于vue项目中禁用浏览器缓存配置的案例,本文到此为止。有关在vue项目中禁用浏览器缓存配置的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: