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

 更新时间:2021年09月11日 14:39:41   作者:多纤果冻  
这篇文章主要介绍了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 ~ .*\.(?: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项目中禁用浏览器缓存配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue配置文件自动生成路由和菜单实例代码

    vue配置文件自动生成路由和菜单实例代码

    因为不同的用户有不同的权限,能访问的页面是不一样的,所以我们在写后台管理系统时就会遇过这样的需求:根据后台数据动态添加路由和菜单,这篇文章主要给大家介绍了关于vue配置文件自动生成路由和菜单的相关资料,需要的朋友可以参考下
    2021-08-08
  • vue 解决报错问题小结

    vue 解决报错问题小结

    最近入门vue,用字节跳动的arco初始化一个项目的时候报错自己解决后没来的及截图,从别人那拷贝个网图把,是一样的报错,本文给大家分享vue 解决报错问题小结,感兴趣的朋友一起看看吧
    2023-09-09
  • Vue中的v-model,v-bind,v-on的区别解析

    Vue中的v-model,v-bind,v-on的区别解析

    vue.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合,vue.js有配套的第三方类库,可以整合起来做大型项目的开发,这篇文章主要介绍了v-model,v-bind,v-on的区别,需要的朋友可以参考下
    2022-12-12
  • 浅谈Vue.js 1.x 和 2.x 实例的生命周期

    浅谈Vue.js 1.x 和 2.x 实例的生命周期

    下面小编就为大家带来一篇浅谈Vue.js 1.x 和 2.x 实例的生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue.js rules校验规则举例详解

    Vue.js rules校验规则举例详解

    Vue表单校验规则(rules)是一种用于验证表单数据的对象,它通常用于Vue.js框架中的表单组件中,可以在表单提交前进行数据验证,这篇文章主要给大家介绍了关于Vue.js rules校验规则的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue 批量自动引入并注册组件或路由实现详解

    vue 批量自动引入并注册组件或路由实现详解

    这篇文章主要为大家介绍了vue 批量自动引入并注册组件或路由实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue中如何给el-table-column添加指定列的点击事件

    vue中如何给el-table-column添加指定列的点击事件

    elementui中提供了点击行处理事件,下面这篇文章主要给大家介绍了关于vue中如何给el-table-column添加指定列的点击事件,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 详解vue移动端项目代码拆分记录

    详解vue移动端项目代码拆分记录

    这篇文章主要介绍了详解vue移动端项目代码拆分记录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue2 配置 Axios api 接口调用文件的方法

    Vue2 配置 Axios api 接口调用文件的方法

    本篇文章主要介绍了Vue2 配置 Axios api 接口调用文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue中$set的使用(结合在实际应用中遇到的坑)

    vue中$set的使用(结合在实际应用中遇到的坑)

    这篇文章主要介绍了vue中$set的使用(结合在实际应用中遇到的坑),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论