纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

多纤果冻   2021-09-11 我要评论
想了解vue项目中禁用浏览器缓存配置案例的相关内容吗多纤果冻在本文为您仔细讲解vue项目中禁用浏览器缓存配置的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue禁用浏览器缓存,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:


相关文章

猜您喜欢

  • nacos gateway动态路由 nacos gateway动态路由实战

    想了解nacos gateway动态路由实战的相关内容吗Insist_on_progress在本文为您仔细讲解nacos gateway动态路由的相关知识和一些Code实例欢迎阅读和指正我们先划重点:nacos,gateway,动态路由下面大家一起来学习吧..
  • nacos动态路由配置 关于springboot中nacos动态路由的配置

    想了解关于springboot中nacos动态路由的配置的相关内容吗Spring王不正在本文为您仔细讲解nacos动态路由配置的相关知识和一些Code实例欢迎阅读和指正我们先划重点:springboot配置,nacos动态路由,nacos配置下面大家一起来学习吧..

网友评论

Copyright 2020 www.sopisoft.net 【绿软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式