052:vue重新发布,软件热更新方面的一点经验示例

在这里插入图片描述

第052个

查看专栏目录: VUE ------ element UI


专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文章目录

    • 专栏目标
    • 应用场景
    • 1. 配置发布版本,不统一强行退出重新登录
      • (1)在main.js中配置版本号
      • (2)在主页面判断 新发布版本与localstorage中的版本号是否一致
      • (3)在login页面判断添加删除localStorage的version项
    • 2. 用户端一直挂机,页面不关掉,需要定时做判断,强迫重新登录
      • auto-update.js
      • 在main.js中引入
    • 后端处理方案

应用场景

在做vue项目时,每次打包发布新版到服务器上,相应的js,css等文件指纹都会发生变化。如何做热更新呢? 在笔者的项目中,localstorage中存储了很多用户相关的信息。新发布的时候,某些信息必须要做出改变。这个时候要求用户要重新登录,重新获取信息存储到localstorage中。

1. 配置发布版本,不统一强行退出重新登录

在这里插入图片描述
在软件开发过程中,为了方便管理和控制软件的版本,一般会根据软件的开发进度和发布计划,制定相应的版本号规则。常见的版本号格式包括以下几种:

  • 主版本号(Major Version Number):表示软件的重大更新和改进,一般在软件功能发生重大变化或出现不兼容性时会升级,一般用数字表示。
  • 次版本号(Minor Version Number):表示软件的次要更新和改进,一般在软件功能有一定改进或新增功能时会升级,一般用数字表示。
  • 修订版本号(Patch Version Number):表示软件的修复和漏洞修正,一般在软件出现漏洞或错误时会发布更新版本,一般用数字表示。
  • 编译版本号(Build Version Number):表示软件的编译版本和构建编号,一般用于区分不同的构建版本,一般用数字或字母表示。

(1)在main.js中配置版本号

在这里插入图片描述

(2)在主页面判断 新发布版本与localstorage中的版本号是否一致

			getVersion(){
				let v = localStorage.getItem("version");
				if (v!= null) {
					if(v!=this.$root.version){
						this.$router.push({path: "/login"})
					}
				} else {
                  this.$router.push({path: "/login"})
				}				
			},

在mounted生命周期中调用一下

mounted() {

this.getVersion();
}

(3)在login页面判断添加删除localStorage的version项

mounted(){
localStorage.removeItem(“version”);
}

登录成功函数中添加这么一句

localStorage.setItem(“version”, this.$root.version)

至此 版本不一致,就会重新登录,获取新的版本号信息。

2. 用户端一直挂机,页面不关掉,需要定时做判断,强迫重新登录

博主采用了https://blog.csdn.net/weixin_42000816/article/details/131800399 这篇文章的方案。

新方案的思路是去轮询请求index.html文件,从中解析里面的js文件,由于vue打包后每个js文件都有指纹标识,因此可以对比每次打包后的指纹,分析文件是否存在变动,如果有变动即可提示用户更新
在这里插入图片描述

auto-update.js

let lastSrcs; //上一次获取到的script地址
let needTip = true; // 默认开启提示

const scriptReg = /<script.*src=["'](?<src>[^"']+)/gm;

async function extractNewScripts() {
	const html = await fetch('/?_timestamp=' + Date.now()).then((resp) => resp.text());
	scriptReg.lastIndex = 0;
	let result = [];
	let match;
	while ((match = scriptReg.exec(html))) {
		result.push(match.groups.src)
	}
	return result;
}

async function needUpdate() {
	const newScripts = await extractNewScripts();
	if (!lastSrcs) {
		lastSrcs = newScripts;
		return false;
	}
	let result = false;
	if (lastSrcs.length !== newScripts.length) {
		result = true;
	}
	for (let i = 0; i < lastSrcs.length; i++) {
		if (lastSrcs[i] !== newScripts[i]) {
			result = true;
			break
		}
	}
	lastSrcs = newScripts;
	return result;
}
const DURATION = 5000;

function autoRefresh() {
	setTimeout(async () => {
		const willUpdate = await needUpdate();
		if (willUpdate) {
			const result = confirm("页面有更新,请刷新查看");
			if (result) {
			  location.href('/login');
			}
                 needTip = false; 
		}
                if(needTip){
			autoRefresh();
		}
	}, DURATION)
}
autoRefresh();

注意 :跟原作者的判断稍有不同,就是非自动刷新页面,而是跳转到登录的页面。

在main.js中引入

import “@/utils/auto-update.js”

后端处理方案

后来后端的同事,出了一个更简单实用的方案,在nginx 上设置协商缓存与强缓存,不用前端来处理了。

location /test {
    #try_files $uri $uri/ /notFound.html;
    #index index.html index.htm;

    if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {
      add_header Cache-Control "public, max-age=25920000";#非html缓存1个月
    }

    if ($request_filename ~* ^.*[.](html|htm)$) {
      add_header Cache-Control "public, no-cache";
    }
  }

详情参考:https://article.juejin.cn/post/7215881683294879801

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/242611.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言之动态内存管理

一、引言 当我们写了一段程序&#xff0c;创建了一个变量或者一个数组&#xff0c;这些操作都需要在内存中开辟出一块空间。但是我们过去的这些操作有一定的局限性&#xff1a;开辟的空间大小是固定的&#xff0c;并且数组在申明的时候&#xff0c;必须指定数组的长度&#xf…

DeepMind的最新研究:人类最后的自留地失守了?

AI对人类世界的学习能力&#xff0c;到目前为止仍然停留在语言层面。 喂给大模型语料——最初是维基百科和Reddit&#xff0c;后来扩展到音频、视觉图像甚至雷达和热图像——后者广义上说是换了种表达方式的语言。也因此有生成式AI的创业者认为&#xff0c;一个极度聪明的大语…

EasyRecovery2024苹果电脑mac破解版安装包下载

EasyRecovery是一款操作安全、价格便宜、用户自主操作的非破坏性的只读应用程序&#xff0c;它不会往源驱上写任何东西&#xff0c;也不会对源驱做任何改变。它支持从各种各样的存储介质恢复删除或者丢失的文件&#xff0c;其支持的媒体介质包括&#xff1a;硬盘驱动器、光驱、…

Pytorch的安装

Pytorch的安装 Pytorch的安装查看显卡信息CUDA兼容性安装说明开始安装常见异常安装CUDA Pytorch的安装 PyTorch的安装绝对是一个不是那么简单的过程&#xff0c;或多或少总是会出现一些奇奇怪怪的问题&#xff0c;这里分享记录一下PyTorch的安装心得。 查看显卡信息 没用显卡的…

Tomcat部署Activiti官方 流程设计器【数据库更换为Mysql !!!】

一、官网下载activiti6 解压后结构如下: database&#xff1a; 存放数据库对象相关脚本&#xff0c;包含不同的数据库脚本 libs&#xff1a; 包含activiti开发过程中需要用到的jar包和源码&#xff0c;不建议通过jar包直接引用&#xff0c;建议通过maven进行管理 wars&am…

模块一——双指针:202.快乐数

文章目录 题目描述简单证明补充知识算法原理代码实现 题目描述 题目链接&#xff1a;202.快乐数 为了方便叙述&#xff0c;将对于⼀个正整数&#xff0c;每⼀次将该数替换为它每个位置上的数字的平方和这⼀个操作记为x操作&#xff1b; 题目告诉我们&#xff0c;当我们不断重…

RHEL8_Linux使用podman管理容器

本章主要介绍使用 podman 管理容器 了解什么是容器&#xff0c;容器和镜像的关系安装和配置podman拉取和删除镜像给镜像打标签导出和导入镜像创建和删除镜像 1.了解容器及和镜像的关系 对于初学者来说&#xff0c;不太容易理解什么是容器&#xff0c;这里举一个例子。想象一下…

Leetcode69 x的平方根

x的平方根 题解1 袖珍计算器算法题解2 二分查找题解3 牛顿迭代 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 注意&#xff1a;不允许使用任何内置指数函数和算符&…

KubeKey 离线部署 KubeSphere v3.4.1 和 K8s v1.26 实战指南

作者&#xff1a;运维有术 前言 知识点 定级&#xff1a;入门级了解清单 (manifest) 和制品 (artifact) 的概念掌握 manifest 清单的编写方法根据 manifest 清单制作 artifactKubeKey 离线集群配置文件编写KubeKey 离线部署 HarborKubeKey 离线部署 KubeSphere 和 K8sKubeKey…

DBSCAN聚类算法学习笔记

DBSCAN聚类算法学习笔记 一些概念名词 MinPts&#xff1a;聚类在一起的点的最小数目&#xff0c;超过这一阈值才算是一个族群 核心点&#xff1a;邻域内数据点超过MinPts的点 边界点&#xff1a;落在核心点邻域内的点称为边界点 噪声点&#xff1a;既不是核心点也不是边界点的…

【Spring】01 Bean 介绍

文章目录 1. 定义2. 特性1&#xff09;可重用性2&#xff09;可配置性3&#xff09;可管理性 3. 生命周期1&#xff09;实例化2&#xff09;属性设置3&#xff09;初始化4&#xff09;使用5&#xff09;销毁 4. 配置方式1&#xff09;XML配置2&#xff09;注解配置3&#xff09…

docker-compose Install gitea

gitea 前言 Gitea 是一个轻量级的 DevOps 平台软件。从开发计划到产品成型的整个软件生命周期,他都能够高效而轻松的帮助团队和开发者。包括 Git 托管、代码审查、团队协作、软件包注册和 CI/CD。它与 GitHub、Bitbucket 和 GitLab 等比较类似。 Gitea 最初是从 Gogs 分支而来…

【揭秘】企业自建社群商城:小程序自主经营的成功秘诀!

在当今这个数字化的时代&#xff0c;社群电商已经成为了商业领域的一个重要趋势。社群电商是指通过社交媒体平台&#xff0c;将具有共同兴趣、需求或价值观的人们聚集在一起&#xff0c;形成一个社群&#xff0c;然后通过提供产品或服务来满足这些人的需求。这种商业模式不仅可…

脚本测试postman快速导出python接口测试过程示例

Postman的脚本可以导出多种语言的脚本&#xff0c;方便二次维护开发。 Python的requests库&#xff0c;支持python2和python3&#xff0c;用于发送http/https请求 使用unittest进行接口自动化测试 01、环境准备 1、安装python&#xff08;使用python2或3都可以&#xff09;…

自学编程推荐一个容易学的中文编程工具,构件箱之单选框组简介

一、前言&#xff1a; 零基础自学编程&#xff0c;中文编程工具下载&#xff0c;中文编程工具构件之扩展系统菜单构件教程 编程系统化教程链接https://jywxz.blog.csdn.net/article/details/134073098?spm1001.2014.3001.5502 给大家分享一款中文编程工具&#xff0c;零基础轻…

dialog 在xml文件进行了自适应宽,但是失效了

如下图 讲述了为什么已经设置好了dialog的宽高 到了显示的时候就会失效的原因 解决方式 &#xff1a; 在自定的dialog中的onstart()方法中进行重新设置宽高 Window window getWindow();WindowManager.LayoutParams lp window.getAttributes();lp.height LinearLayout.La…

springboot使用EasyExcel导入数据

springboot使用EasyExcel导入数据 1. 引入依赖 <!-- Easy Excel --> <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.2.1</version> </dependency>2. 建立对应实体类 假如…

Visual Studio使用Web Deploy发布.NET Web应用到指定服务器的IIS中

前言 今天要讲的是在Window 2008 R2版本的服务器下如何配置Web Deploy&#xff0c;和Visual Studio使用Web Deploy发布.NET Web应用到指定服务器的IIS中。 因为历史原因项目只能使用这个版本的服务器&#xff0c;当然使用其他服务器版本配置流程也是一样的。 Web Deploy介绍 …

Oracle数据库对SAP的支持

其实有时候&#xff0c;很多信息都已经整理好了&#xff0c;你只需要知道他在哪里就好&#xff0c;无需自己整理。 Oracle数据库对SAP的支持&#xff0c;可以从这个网页快速了解。 看前面的概述&#xff1a; Oracle 数据库是全球 SAP 客户中排名第一的数据库&#xff0c;拥有…

插入算法(C语言)

#include<cstdio> #include<iostream> #define N 9 using namespace std; int main() {int arr[N1] { 1,4,7,13,16,19,22,25,280 }; int in,i,j;//要插入的数字//打印要插入数字的数组所有元素printf("插入前的数组: ");for ( i 0; i <N; i){print…
最新文章