vue 强制清除浏览器缓存

vue 强制清除浏览器缓存(1)最基本的方法就是,在打包的时候给每个打包文件加上hash值,一般是在文件后面加上时间戳//在vue.config.js文件中,找到output:constTimestamp=newDate().getTime()output:{//输出重构打包编译后的文件名称【模块名称.版本号.时间戳】filename:`[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,chunkFilen

大家好,又见面了,我是你们的朋友全栈君。

(1)最基本的方法就是,在打包的时候给每个打包文件加上hash 值,一般是在文件后面加上时间戳

//在vue.config.js 文件中,找到output:
const Timestamp = new Date().getTime()
output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
      chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
 
    }

(2)在html 文件中加入meta 标签(不推荐此方法)

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

(3)需要后端陪着,进行  nginx 配置 


location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}
原因: 第二种方法浏览器也会出现缓存,配置之后禁止html 出现缓存
no-cache, no-store可以只设置一个
no-cache浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200
no-store浏览器不缓存,刷新页面需要重新下载页面

(4)在脚本加载时加入一个时间戳,修改 webpack.prod.conf.js 文件。(未使用过该方法,需要实践)

const version = new Date().getTime();
new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    hash: version,
    favicon: resolve('icon.ico'),
    title: 'vue-admin-template',
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    }
})

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/161108.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月18日 下午5:46
下一篇 2022年7月18日 下午5:46


相关推荐

  • Typora——MarkDown学习笔记

    Typora——MarkDown学习笔记一级标题:# 文字二级标题:## 文字三级标题:### 文字字体粗体:文字两边加**斜体:文字两边加*斜体并加粗:文字两边加***删除文字:两边加~~引用:>+空格分割线:— 或者***图片:![截图](图片路径)超链接:点击跳转排序:排序号:1. 2. 3.无序:·回车表格名字性别生日张三男19990513代码:skdsldl…

    2022年8月8日
    9
  • pycharm连接github出现404_pycharm上传代码到github

    pycharm连接github出现404_pycharm上传代码到githubgitHub是一个面向开源及私有软件项目的托管平台,因为只支持git作为唯一的版本库格式进行托管,故名gitHub。配置的前提条件安装git注册github一、配置pycharmFile-&amp;gt;Settings左侧的菜单VersionControl-&amp;gt;GitHubHost:不用改Login、Password:就是你github的注册账号和密码Auth…

    2022年8月26日
    15
  • vue常用组件封装_vue组件全局注册和局部注册

    vue常用组件封装_vue组件全局注册和局部注册项目中肯定会常用的一些基础组件,比如弹窗,toast之类的,要是在每个页面去引入的话那也太麻烦了,还好vue提供了一个全局注册组件的api,即Vue.compoment。在入口文件main.js里import需要的组件,使用Vue.compoment注册即可//src/main.jsimportmodelfrom’@/components/BaseModel’importtoastfrom’@/components/BaseButton’Vue.component(‘BaseMod

    2025年11月20日
    8
  • 几张系统图_一共有几个系统

    几张系统图_一共有几个系统几张系统图

    2022年4月21日
    81
  • 讯飞星火AI图像生成如何操作

    讯飞星火AI图像生成如何操作

    2026年3月14日
    3
  • 一次手动查杀永恒之蓝病毒木马文件

    一次手动查杀永恒之蓝病毒木马文件在日常运维中,有一天发现我们深度威胁设备报出“MS17-010-RemoteCodeExecution-SMB(Request)”日志,很显然,这个电脑是被植入永恒之蓝病毒了,不断往外面发目标端口是445的包。现在表演手动查杀病毒木马文件。1、在CMD窗口下,输入如下命令:netatst–ano|findstr“445”,找出相关进程号,其中SYN_SENT状态,很显然…

    2022年10月17日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号