广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue如何解决每次发版都要强刷清除浏览器缓存问题
  • 686
分享到

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

Vue每次发版清除浏览器缓存Vue清除缓存 2022-11-13 14:11:38 686人浏览 泡泡鱼
摘要

目录每次发版都要强刷清除浏览器缓存问题原理Vue 强制清除浏览器缓存(1)最基本的方法就是(2)在html文件中加入meta标签(3)需要后端陪着,进行Nginx配置 (4)在脚本加

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

原理

将打包后的jsCSS文件,加上打包时的时间戳

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

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

本文链接: https://www.lsjlt.com/news/172419.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作