vue项目中禁用浏览器缓存的配置步骤

  介绍

本篇内容主要讲解“vue项目中禁用浏览器缓存的配置步骤”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目中禁用浏览器缓存的配置步骤”吧!

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

<强> 1。公共文件夹中修改指数。html文件元配置

 vue项目中禁用浏览器缓存的配置步骤

& lt; meta  http-equiv=皃ragram",内容=皀o-cache",/比;   ,,,& lt; meta  http-equiv=癱ache-control",内容=皀o - cache,,不是商店,,must-revalidate",/比;   ,,,& lt; meta  http-equiv=癳xpires",内容=?“,/在

<强> 2。vue cli构建配置(针对vue3以下版本)

在vue.config。js新增配置

const  Timestamp =, new 日期().getTime ()   module.exports =, {   ,,configureWebpack: {   输出:,,,,{,//输出重构,,打包编译后的,文件名称,,【模块名称。版本号(可选)。时间戳】   ,,,,,文件名:,“[名字]。${时间戳}. js ',   ,,,,,chunkFilename:,“[名字]。${时间戳}. js '   ,,,},   ,,},   css才能:{   ,,,精华:,{,//打包后css文件名称添加时间戳   ,,,,,文件名:,“css/[名字]。${时间戳}. css ',   ,,,,,chunkFilename:,“css/[名字]。${时间戳}. css”   ,,,}   ,,},   }

<强> 3。Nginx配置

禁用掉Nginx缓存,让浏览器每次到服务器去请求文件,而不是在浏览器中读取缓存文件。

当程序调试好上线后,可以开启Nginx缓存,节省服务器的带宽流量,减少一些请求,降低服务器的压力。

 vue项目中禁用浏览器缓存的配置步骤

在Nginx。参看文件里配置html文件默认加头不缓存配置

以下实际项目中nginx缓存配置

,,的位置~,。* \。(?:htm | html)美元,{   ,,,add_header  Cache-Control “私人的,,不是商店,,no - cache,, must-revalidate, proxy-revalidate";   以前,,}

Nginx静态资源缓存设置,https://codecat.blog.csdn.net/article/details/117604817

vue项目中禁用浏览器缓存的配置步骤