前端发版(发包)缓存,需要强制刷新问题处理

server/2024/9/22 21:36:59/

问题原因: 浏览器问题

一、创建初始版本文件(public/version.json)

{ "version": "1722240835844" }

二、设置版本判断(version.js)

import axios from "axios";const isNewVersion = () => {let baseUrl = `/version.json?t=${new Date().getTime()}`;axios.get(baseUrl).then((res) => {if (res.status === 200) {let webappVersion = res.data.version;//当前项目发布的版本let localWebappVersion = localStorage.getItem("webappVersion");//缓存中的版本if (localWebappVersion && localWebappVersion != webappVersion) {// 如果没有缓存版本 或者 缓存版本与当前项目发布版本不一致时 强行刷新localStorage.setItem("webappVersion", webappVersion);window.location.reload();return;} else {localStorage.setItem("webappVersion", webappVersion);}}});
};
export default isNewVersion;

三、设置全局监听(main.js. permission.js)

router.beforeEach((to, from, next) => {//判断当前代码版本是否与服务器中代码版本一致,如不一致则刷新页面获取最新isNewVersion(); 
});

四、生成打包版本(vite.config.js)

  1. 引入变量
    const path = require("path");const fs = require("fs");
  1. 生成版本代码
	// 如果当前时打包行为 生成最新版本号if (command == "build") {//打包时生成版本号let version = {version: JSON.stringify(new Date().getTime()),};fs.writeFile("./public/version.json", JSON.stringify(version), () => {console.log("新版本号生成成功", version);});}

http://www.ppmy.cn/server/96304.html

相关文章

宝塔8.0开心版安装命令

使用方法 Centos安装脚本 yum install -y wget \&\& wget -O install.sh https://BTKXB.com/install/install_6.0.sh \&\& sh install.sh Ubuntu/Debian安装脚本 wget -O install.sh https://BTKXB.com/install/install_6.0.sh \&\& bash install.…

上线前端系统

上线一个静态的前端系统(续) 在eleme服务器上 启动服务 启动rpcbind [rooteleme-static ~]# systemctl restart rpcbind 启动nfs [rooteleme-static ~]# systemctl restart nfs 重启服务 启动smb [rootstatic-server img]# systemctl start smb…

类和对象(下)C++

1.初始化列表 1.为什么有初始化列表,它的作用? ->初始化列表,是构造函数初始化的另一种形式。 ->在语法上面理解,初始化列表可以认定为是每个成员变量定义初始化的地方. ->引用成员变量,const成员变量&am…

unity中 out ref params 的区别与使用环境

ref有进有出 将一个变量传入一个函数中进行"处理","处理"完成后,再将"处理"后的值带出函数。 out 只出不进 定义变量的值不变,不经过方法,传出变量的新值 ref:有进有出 ref 参数是…

Xlua原理分析 四

前面已经介绍了Xlua的通信原理,这篇主要记录Xlua如何做到Hotfix的。 我们项目就用到Xlua的Hotfix特性,周更用Lua去修改代码。版本内用C#开发。这点我觉得是Xlua比toLua强大的重要特性之一。 如何使用Hotfix本篇不介绍了,看Xlua教程懂得都懂…

Oracle-OracleConnector

提示:OracleConnector 类是 Debezium 中用于与 Oracle 数据库交互的一个连接器组件 文章目录 前言一、核心功能二、代码分析总结 前言 提示:OracleConnector 类负责配置、启动、管理和验证与 Oracle 数据库的连接,并为后续的数据捕获任务准备…

Python中的`enumerate`函数详解及其在循环中的应用

Python中的enumerate函数详解及其在循环中的应用 在Python编程中,enumerate是一个非常有用的内置函数,它在处理循环时尤其重要。本文将详细介绍enumerate的功能、用法以及如何在实际编程中应用它,以提高代码的可读性和效率。 什么是enumera…

Barotrauma潜渊症怎么用服务器开服联机呢

1、购买后登录服务器(百度莱卡云) 购买服务器后,如下图👇,面板信息都在产品详情页面内 注意:请不要用你的莱卡云账号信息去登陆服务器面板 进入控制面板后会出现正在安装的界面,安装时长约5分…