vue前端更新后需要清空缓存

场景:前端vue3网站项目使用wepack打包后进行部署,但是用户浏览器访问网站时加载了缓存,导致没有及时更新。

现在需要一个解决方案保证每次重新打包部署后,用户浏览器访问网站重新加载js和css,但是未更新还是继续使用缓存加快加载速度。

1、配置nginx不缓存index.html

index.html文件很小,不缓存的话也不会造成很大影响

javascript 复制代码
server {
    listen 80;
    server_name yourdomain.com;
    location / {
        try_files $uri $uri/ /index.html;
        root /yourdir/;
        index index.html index.htm;
 
        //对html htm文件设置永远不缓存
        if ($request_filename ~* .*\.(?:htm|html)$) {
            add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-    revalidate";
        }     
      }
}

2、配置vue.config.js项目webpack为js和css文件增加引用版本号

打包后index.html中引用js和css文件都会带上 ?v=时间戳

这样js和css更新后因为时间戳不一样,会重新加载文件

javascript 复制代码
const timestamp = new Date().getTime()

module.exports = defineConfig({
    css: {
        extract: {
            // 修改输出css目录名及文件名
            filename: `css/[name].css?v=${timestamp}`,
            chunkFilename: `css/[name].css?v=${timestamp}`,
        }
    },
    configureWebpack: {
        output: {
            // 修改输出js目录名及文件名
            filename: `js/[name].js?v=${timestamp}`,
            chunkFilename: `js/[name].js?v=${timestamp}`,
        },
    },
})
相关推荐
别拿曾经看以后~33 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死35 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
想要打 Acm 的小周同学呀1 小时前
LRU缓存算法
java·算法·缓存