vue打包上线清除缓存机制-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

vue打包上线清除缓存机制

[导读]:第一步,html增加meta标签<metahttp-equiv="Pragma"content="no-cache"><metahttp-equiv="cache-control"content="no-cache,no-store,must-revalidate">第二步,修改打包之后的js、css、image的命名规则在vue.config.js种修改配...

第一步,html增加meta标签

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

第二步,修改打包之后的js、css、image的命名规则

在vue.config.js种修改配置

const Timestamp = new Date().getTime()
module.exports={
filenameHashing: false,// 此步骤可省略。
configureWebpack: config => {
        // 打包编译后修改 js 文件名
        config.output.filename = `assets/js/[name].${Timestamp}.js`;
        config.output.chunkFilename = `assets/js/[name].${Timestamp}.js`;
    },
    css: {
        extract: {
            // 打包编译后修改 css 文件名
            filename: `assets/css/[name].${Timestamp}.css`,
            chunkFilename: `assets/css/[name].${Timestamp}.css`
        }
    }
}

第三步,修改nginx配置,不缓存页面

server {
    location / {
        add_header Cache-Control no-store;
        add_header Pragma no-cache;
    }
}

image.png


本文来自阿习进阶博客,如若转载,请注明出处:https://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ