广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目中禁用浏览器缓存配置案例
  • 729
分享到

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

2024-04-02 19:04:59 729人浏览 薄情痞子
摘要

项目发布版本会遇到经常需要清理缓存的问题,以下是项目禁用缓存的实际方法 1.public文件夹中修改 index.html文件meta配置 <meta Http-

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

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 ~ .*\.(?:htm|html)$ {
    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
  }

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

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

--结束END--

本文标题: vue项目中禁用浏览器缓存配置案例

本文链接: https://www.lsjlt.com/news/135393.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作