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

查看专栏目录: 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等

应用场景

在做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