[feat]增加生产环境中前端代码更新版本后用户端自动升级为最新前端版本

web/.gitignore

@@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+public/version

web/src/router/index.ts

@@ -13,6 +13,7 @@ import {initBackEndControlRoutes, setRouters} from '/@/router/backEnd';
 import {useFrontendMenuStore} from "/@/stores/frontendMenu";
 import {useTagsViewRoutes} from "/@/stores/tagsViewRoutes";
 import {toRaw} from "vue";
+import {checkVersion} from "/@/utils/upgrade";
 
 /**
  * 1、前端控制路由时：isRequestRoutes 为 false，需要写 roles，需要走 setFilterRoute 方法。
@@ -95,6 +96,8 @@ export function formatTwoStageRoutes(arr: any) {
 
 // 路由加载前
 router.beforeEach(async (to, from, next) => {
+    // 检查浏览器本地版本与线上版本是否一致，判断是否需要刷新页面进行更新
+    await checkVersion()
     NProgress.configure({showSpinner: false});
     if (to.meta.title) NProgress.start();
     const token = Session.get('token');

web/src/utils/loading.ts

@@ -1,5 +1,7 @@
 import { nextTick } from 'vue';
 import '/@/theme/loading.scss';
+import { showUpgrade } from "/@/utils/upgrade";
+
 
 /**
  * 页面全局 Loading
@@ -9,6 +11,8 @@ import '/@/theme/loading.scss';
 export const NextLoading = {
 	// 创建 loading
 	start: () => {
+		// 显示升级提示
+		showUpgrade()
 		const bodys: Element = document.body;
 		const div = <HTMLElement>document.createElement('div');
 		div.setAttribute('class', 'loading-next');

web/src/utils/upgrade.ts

@@ -0,0 +1,54 @@
+import axios from "axios";
+import * as process from "process";
+import {Local, Session} from '/@/utils/storage';
+import {ElNotification} from "element-plus";
+import fs from "fs";
+
+// 是否显示升级提示信息框
+export const IS_SHOW_UPGRADE_SESSION_KEY = 'isShowUpgrade';
+const versionKey = 'DVADMIN3_VERSION'
+
+export function showUpgrade  () {
+    const isShowUpgrade = Session.get(IS_SHOW_UPGRADE_SESSION_KEY) ?? false
+    if (isShowUpgrade) {
+        Session.remove(IS_SHOW_UPGRADE_SESSION_KEY)
+        ElNotification({
+            title: '新版本升级',
+            message: "检测到系统新版本，正在更新中！不用担心，更新很快的哦！",
+            type: 'success',
+            duration: 5000,
+        });
+    }
+}
+
+// 生产环境前端版本校验，
+export async function checkVersion(){
+    if (process.env.NODE_ENV === 'development') {
+        // 开发环境无需校验前端版本
+        return
+    }
+    // 获取线上版本号 t为时间戳，防止缓存
+    await axios.get(`/version?t=${new Date().getTime()}`).then(res => {
+        const {status, data} = res || {}
+        if (status === 200) {
+            // 获取当前版本号
+            const localVersion = Local.get(versionKey)
+            // 将当前版本号持久缓存至本地
+            Local.set(versionKey, data)
+            // 当用户本地存在版本号并且和线上版本号不一致时，进行页面刷新操作
+            if (localVersion && localVersion !== data) {
+                // 本地缓存版本号和线上版本号不一致，弹出升级提示框
+                // 此处无法直接使用消息框进行提醒，因为 window.location.reload()会导致消息框消失,将在loading页面判断是否需要显示升级提示框
+                Session.set(IS_SHOW_UPGRADE_SESSION_KEY, true)
+                window.location.reload()
+
+            }
+        }
+    })
+}
+
+export function generateVersionFile (){
+    // 生成版本文件到public目录下version文件中
+    const version = `${process.env.npm_package_version}.${new Date().getTime()}`;
+    fs.writeFileSync('public/version', version);
+}

web/vite.config.ts

@@ -3,6 +3,7 @@ import { resolve } from 'path';
 import { defineConfig, loadEnv, ConfigEnv } from 'vite';
 import vueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import { generateVersionFile } from "./src/utils/upgrade";
 
 const pathResolve = (dir: string) => {
 	return resolve(__dirname, '.', dir);
@@ -17,6 +18,8 @@ const alias: Record<string, string> = {
 
 const viteConfig = defineConfig((mode: ConfigEnv) => {
 	const env = loadEnv(mode.mode, process.cwd());
+	// 当Vite构建时，生成版本文件
+	generateVersionFile()
 	return {
 		plugins: [vue(), vueJsx(), vueSetupExtend()],
 		root: process.cwd(),