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

 更新时间:2022年08月11日 10:17:39   作者:晓狐狸  
这篇文章主要介绍了Vue如何解决每次发版都要强刷清除浏览器缓存问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

原理

将打包后的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
    }
})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • Vue波纹按钮组件制作

    Vue波纹按钮组件制作

    本文给大家分享了VUE制作点击按钮出现水波纹效果的组件过程,对此有需求的朋友可以跟着学习下。
    2018-04-04
  • vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

    vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

    这篇文章主要介绍了vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Vue导出el-table表格为Excel文件的两种方式

    Vue导出el-table表格为Excel文件的两种方式

    在开发过程中,我们经常需要将表格数据导出为 Excel 文件,大多数情况下,由后端处理即可,但是当数据量不大、需要快速响应用户操作、或者数据已经在前端进行处理和展示时,前端该如何实现呢,本文将介绍两种方法,需要的朋友可以参考下
    2024-09-09
  • 详解windows下vue-cli及webpack 构建网站(三)使用组件

    详解windows下vue-cli及webpack 构建网站(三)使用组件

    本篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(三)使用组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue-cropper 图片裁剪的基本原理及思路讲解

    Vue-cropper 图片裁剪的基本原理及思路讲解

    这篇文章主要介绍了Vue-cropper 图片裁剪的基本原理及思路讲解,本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下
    2018-04-04
  • vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    这篇文章主要介绍了vue项目打包后提交到git上为什么没有dist这个文件的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • vue+element tree懒加载更新数据的示例代码

    vue+element tree懒加载更新数据的示例代码

    这篇文章主要介绍了vue+element tree懒加载更新数据,文中给大家补充介绍了Vue Element Ui 树形表懒加载新增、修改、删除等操作后局部数据更新的详细代码,感兴趣的朋友跟随小编一起看看吧
    2022-09-09
  • 使用vue实现多规格选择实例(SKU)

    使用vue实现多规格选择实例(SKU)

    这篇文章主要介绍了使用vue实现多规格选择实例(SKU),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 使用vue构建多页面应用的示例

    使用vue构建多页面应用的示例

    这篇文章主要介绍了使用vue构建多页面应用的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-10-10
  • 公共组件父子依赖调用及子校验父条件问题解决

    公共组件父子依赖调用及子校验父条件问题解决

    这篇文章主要介绍了如何解决公共组件父子组件依赖调用和子组件校验父组件条件的问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论