Vue如何解决每次发版都要强刷清除浏览器缓存问题

目录
  • 每次发版都要强刷清除浏览器缓存问题
    • 原理
  • vue 强制清除浏览器缓存
    • （1）最基本的方法就是
    • （2）在html文件中加入meta标签
    • （3）需要后端陪着,进行nginx配置　
    • （4）在脚本加载时加入一个时间戳

每次发版都要强刷清除浏览器缓存问题

原理

将打包后的js和css文件，加上打包时的时间戳

1.index.html

在 public 目录下的index.html文件里添加如下代码：

<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.config.js

在vue.config.js中，配置相关打包配置，代码如下：

let timeStamp = new Date().getTime();
module.exports = {
    publicPath: "./",
    filenameHashing: false,
    // 打包配置
    configureWebpack: {
        output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
            filename: `js/js[name].${timeStamp}.js`,
            chunkFilename: `js/chunk.[id].${timeStamp}.js`,
        }
    },
    css: {
        extract: { // 打包后css文件名称添加时间戳
            filename: `css/[name].${timeStamp}.css`,
            chunkFilename: `css/chunk.[id].${timeStamp}.css`,
        }
    }
};
  • filename指列在entry 中，打包后输出的文件的名称。
  • chunkFilename指未列在entry 中，却又需要被打包出来的文件的名称。

vue 强制清除浏览器缓存

（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
    }
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue性能优化之cdn引入vue-Router的问题

    vue性能优化之cdn引入vue-Router的问题

    目录 cdn引入vue-Router问题 vue引入外部cdn报错 'XXX is not defined' 及事件处理 解决办法 cdn引入vue-Router问题 关于vue的性能优化,有一个非常重要的点,就是用cdn的方式引入vue.vue- router.ElementUI.vuex.axios.jquery,那么到底怎么引呢? 1.打开国内cdn服务网址: https://www.bootcdn.cn/ 2.查看你的项目 package.json ,查看你安装的是哪个版本 3.在cdn

  • 使用v-memo缓存模板子树提高应用性能详解

    目录 引言 v-memo 是做什么的? 事例 错误的使用方式 管理更新 与 v-for 结合使用 无意中停止了子组件触发的更新 总结 引言 Vue3 为我们提供了几项开箱即用的重大性能改进,但也引入了一些额外的手动功能,可以帮助提高我们的应用性能. 在这节课中,我们介绍一下,在 Vue 3.2 中引入新指令 v-memo.引入这个指令的目的是帮助我们提高中型/大型 Vue 应用程序的性能,小项目大家根据需要自行决定. v-memo 是做什么的? 官网对 v-memo 定义是这样的: 缓存一个模板

  • Vue keepAlive实现不同的路由共用一个组件component的缓存问题(推荐)

    不同的路由共用一个组件component,并用keepAlive实现不同的页面缓存 实现功能:使用列表页面检索的数据跳转到对应的详情页面,从详情页回到列表页能记住上次检索的数据,再次切换到详情页时能正常取到对应的数据 实现方式使用Vue keepAlive实现页面缓存,整理了一些资料和其他的博客在这里记录一下.... keepAlive原理: 1,保留组件的状态,在重新进入页面时避免重新渲染.2.是抽象组件,它自身不会渲染DOM元素,也不会出现在父组件链中.3.当组件在 内被切换,它的 acti

  • vue虚拟滚动性能优化方式详解

    vue虚拟滚动性能优化方式详解

    目录 引言 虚拟滚动(Virtual Scrolling) 理解虚拟滚动 虚拟 滚动 实现虚拟滚动 核心步骤 效果预览 最后 引言 一个简单的情景模拟(千万别被带入): A: 假设现在有 10 万条数据,你作为前端该怎么优化这种大数据的列表? B: 针对大数据列表一般不会依次性加载,会采用上拉加载.分页加载等方式实现优化. A: 那假如加载到最后一条数据的时候,页面上只是列表部分的数据就至少对应 10 万个 dom 节点,你觉得一个页面渲染至少 10 万个 dom 节点的性能如何? A: 如果这

  • Vue浅析讲解动态组件与缓存组件及异步组件的使用

    Vue浅析讲解动态组件与缓存组件及异步组件的使用

    目录 1.什么是动态组件 2.如何实现动态组件渲染 3.如何实现缓存组件 4.异步组件 1.什么是动态组件 当我们希望页面中的某个地方,在不同组件之间进行动态切换,这时候除了条件渲染,还可以使用动态组件. 2.如何实现动态组件渲染 vue提供了一个内置的组件,专门用来实现动态组件的渲染:通过 is 属性动态指定要渲染的组件 因为要渲染的组件是不确定的,所以要通过data申明一个变量用来接收组件的名称,用 :is 动态绑定这个变量到组件中,通过按钮添加事件改变变量的值来切换相应组件 案例: //父

  • Vue 项目性能优化方案分享

    Vue 项目性能优化方案分享

    目录 前言 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch  区分使用场景 1.3.v-for遍历必须为item添加key,且避免同时使用v-if 1.4.长列表性能优化 1.5.事件的销毁 1.6.图片资源懒加载 1.7.路由懒加载 1.8.第三方插件的按需引入 1.9.优化无限列表性能 1.10.服务端渲染 SSR or 预渲染 二.Webpack 层面的优化 2.1.Webpack 对图片进行压缩 2.2.减少 ES6 转为

  • Vue如何解决每次发版都要强刷清除浏览器缓存问题

    目录 每次发版都要强刷清除浏览器缓存问题 原理 vue 强制清除浏览器缓存 (1)最基本的方法就是 (2)在html文件中加入meta标签 (3)需要后端陪着,进行nginx配置 (4)在脚本加载时加入一个时间戳 每次发版都要强刷清除浏览器缓存问题 原理 将打包后的js和css文件,加上打包时的时间戳 1.index.html 在 public 目录下的index.html文件里添加如下代码: <meta http-equiv="pragram" content="no

  • vue 部署上线清除浏览器缓存的方式

    vue 部署上线清除浏览器缓存的方式

    目录 部署上线清除浏览器缓存 修改根目录index.html 配置 nginx 不缓存 html 打包的文件路径添加时间戳 vue项目部署,清理缓存方式 部署上线清除浏览器缓存 vue 项目打包上线之后,每一次都会有浏览器缓存问题,需要手动的清除缓存.这样用户体验非常不好,所以我们在打包部署的时候需要尽量避免浏览器的缓存. 下面是我的解决方案: 修改根目录index.html 在 head 里面添加下面代码 <meta http-equiv="pragram" content=&

  • 解决Django中修改js css文件但浏览器无法及时与之改变的问题

    今天修改之前实习小伙伴写的js代码的时候,遇到修改后页面未发生变化的问题.因为我是web开发小白,所以上网查了一波,得以解决~~ 初次进行web工程开发的人可能会碰到这样的情况:自己在明明对工程上的某个js或css文件进行了修改,并提交到服务器上去了.但是在客户端浏览器里面打开页面时,并没有看到修改后的效果,而是该js文件的旧版本的效果. 如果了解过浏览器缓存就知道,为了效率,浏览器通常会缓存js/css文件.如果没有清除浏览器缓存的该js文件的话,js的修改效果就不会起作用,因为浏览器还是用的

  • 解决在vue项目中,发版之后,背景图片报错,路径不对的问题

    解决方法: 在utils.js里边的 加上publicPath:'../../', 在引入图片或者背景图的时候,使用方法: 以上这篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 关于Vue背景图打包之后访问路径错误问题的解决 vue-cli中打包图片路径错误的解决方法 关于vue.js发布后路径引用的问题解决 vue cli使用绝对路径引用图片问题的解决 详解vue-cil和webp

  • 解决vue项目axios每次请求session不一致的问题

    1.vue开发后台管理项目,登录后,请求数据每次session都不一致,后台返回未登录,处理方法打开main.js设置: // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' imp

  • 解决pycharm每次新建项目都要重新安装一些第三方库的问题

    目前有三个解决办法,也是亲测有用的: 第一个方法: 因为之前有通过pycharm的project interpreter里的+号添加过一些库,但添加的库只是指定的项目用的,如果想要用,就必须用之前的项目的python解释器,举个例子: 这个是我之前的项目的解释器,这个项目解释器是继承的python的解释器,同时又安装了上面你看到的这些库,包含numpy和opencv-python等,然后我新建一个项目: 这个项目的解释器是这个,没有我之前安装的numpy以及opencv等库.只要 把它换成之前项

  • 解决pycharm每次打开项目都需要配置解释器和安装库问题

    前言 最近在使用pycharm开发新项目的时候,每次打开新的工程都显示没有解释器,要不加了解释器就是代码一堆没有红色错误提示没有模块问题,找到了解决办法做一个记录. 问题打开新项目提示没有解释器 按照操作选择别的项目解释器.file–>settings 然后代码一堆模块问题报错 点击底部的Terminal就可以进去和我一样的环境 这时候你如果按照报错去百度谷歌的话,都提示模块没有安装提示你使用pip安装对应模块,但是你安装的时候提示已经安装,此时代码依旧报错心态大崩. 正确解决思路:每次打开新工

  • 解决idea每次新建项目都需要重新指定maven目录

    原因 每次使用idea新建项目,就会在默认的c盘下的一个maven仓库中下载jar包,可是我自己指定maven仓库不是这个.如何让idea在新建项目的时候使用自定义位置的maven目录来下载jar包呢,下面我会告诉你. 解决方案File->Other Settings -> Settings for New Projects 配置maven 新建一个demo项目查看是否完成了. 如果maven目录和之前配置的一样,那就是成功了!可以愉快的撸代码了! 到此这篇关于解决idea每次新建项目都需要重

  • 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机

  • Vue SPA 如何解决浏览器缓存问题

    目录 Vue SPA 解决浏览器缓存 Vue 微信浏览器缓存问题 Vue SPA 解决浏览器缓存 如何让发布到线上的 vue 单页应用能及时更新到浏览器,而无需用户强制刷新页面呢? 因为 js.css.图片等资源文件名带有 hash 值,只要文件名变了就会更新,所以可以设置缓存,但 html 文件名没有加 hash 值,所以不能缓存该文件. 在 nginx.conf 中设置         location / {             root html/dist;            

随机推荐