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";}}