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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 2020 年 11 月程序员工资统计,平均 14327 元

    2020 年 11 月程序员工资统计,平均 14327 元

    2020年11月14日
    207
  • Vue 子组件调用父组件的属性,方法「建议收藏」

    Vue 子组件调用父组件的属性,方法「建议收藏」一、子组件调用父组件的方法子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了//父组件<template><div><label>我是父组件</label><child@fatherMethod=”test”></child>&…

    2022年9月27日
    2
  • 利用Topshelf把.NET Core Generic Host管理的应用程序部署为Windows服务「建议收藏」

    利用Topshelf把.NET Core Generic Host管理的应用程序部署为Windows服务「建议收藏」背景2019第一篇文章。此文源于前公司在迁移项目到.NETCore的过程中,希望使用GenericHost来管理定时任务程序时,没法部署到Windows服务的问题,而且官方也没给出解决方案,只能关注一下官方issue#809等他们方解决了。官方文档只提供了一个《在Windows服务中托管ASP.NETCore》的方案,可以使用Microsoft.AspNetCore.Host…

    2022年8月31日
    3
  • windows安装git cmd_git for windows

    windows安装git cmd_git for windowsGitLFS(GitLargeFileStorge,Git大文件储存)。本文只介绍windows下的安装方式。写在前面,GitLFS安装依赖Git,所以我们先安装git下载地址【传送门】双击安装,直接next1.安装地址【传送门】2.安装双击->默认->确定->安装完成运行cmd下输入gitlfsinstall一般命令gitlfsinstall开启LFS功能gitlfstrackl文件追踪,一般后面”文件名.后缀”gitlf

    2022年9月8日
    4
  • java遍历ArrayList的四种方法[通俗易懂]

    java遍历ArrayList的四种方法[通俗易懂]java遍历ArrayList的各种方法

    2022年7月22日
    8
  • Hello Qt——QMake用户指南[通俗易懂]

    Hello Qt——QMake用户指南[通俗易懂]一、QMake使用QMake提供了一个用于管理应用程序、库、其它组件的构建过程的面向工程系统。QMake扩展了每个工程文件的信息,生成一个执行编译和链接过程的必须命令的MakeFile。1、描述工程工程文件.pro描述了工程信息。工程文件信息会被qmake用于生成包含构建过程中所需的所有命令的MakeFile。工程文件通常包含一系列头文件和源文件,通用配置信息以及音乐程序指定的细节,如应用程序的链接库、搜索路径。工程文件包含一定数量的不同元素,如注释、变量声明、内置函数以及简单的控制结构

    2022年5月19日
    40

发表回复

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

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