vue项目中禁用浏览器缓存配置案例

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue项目中禁用浏览器缓存配置案例脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

image.png

    <;meta http-equiv="PRagram" 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 = new Date().getTime()
module.exports = {
  configureWebpack: {
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号(可选).时间戳】
      filename: `[name].${Timestamp}.js`,
      chunkFilename: `[name].${Timestamp}.js`
    },
  },
  css: {
    extract: { // 打包后css文件名称添加时间戳
      filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`
    }
  },
}

3.Nginx配置

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

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

image.png

在nginx.conf文件里配置html文件默认加header 不缓存配置

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

  location ~ .*\.(&#63;:htm|html)$ {
    add_header Cache-Control "private, no-store, no-cache, must-revalidate, Proxy-revalidate";
  }

Nginx静态资缓存设置 https://www.js-code.com/article/222620.htm

到此这篇关于vue项目中禁用浏览器缓存配置案例的文章就介绍到这了,更多相关vue项目中禁用浏览器缓存配置内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的vue项目中禁用浏览器缓存配置案例全部内容,希望文章能够帮你解决vue项目中禁用浏览器缓存配置案例所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: