feature/前端版本控制刷新页面

package.json

@@ -55,10 +55,12 @@
     "element-plus": "^2.6.0",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
+    "fs": "0.0.1-security",
     "html-to-image": "^1.11.11",
     "html2canvas": "^1.4.1",
     "lodash-es": "^4.17.21",
     "luckyexcel": "^1.0.1",
+    "nanoid": "^5.0.7",
     "net": "^1.0.2",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",

public/version.json

@@ -0,0 +1,3 @@
+{
+  "version": "24.7.15.v1"
+}

src/plugins/permission.ts

@@ -2,7 +2,7 @@ import router from "@/router";
 import { useUserStore } from "@/store/modules/user";
 import { usePermissionStore } from "@/store/modules/permission";
 import { useDictionaryStore } from "@/store/modules/dictionary";
-
+import { isNewVersion } from "@/utils/version.js";
 import NProgress from "@/utils/nprogress";
 import { getUserDicts } from "@/api/auth";
 
@@ -12,6 +12,7 @@ export function setupPermission() {
 
   router.beforeEach(async (to, from, next) => {
     NProgress.start();
+    isNewVersion();
     const hasToken = localStorage.getItem("token");
     if (hasToken) {
       if (to.path === "/login") {

src/utils/version.js

@@ -0,0 +1,40 @@
+// utils/version.js
+
+import axios from "axios";
+// 生成一个随机的字符串作为请求的查询参数
+import { nanoid } from "nanoid";
+import { ElMessageBox } from "element-plus";
+
+export async function isNewVersion() {
+  // 构建了一个 URL，用于请求版本信息的 JSON 文件。这个 URL 包括当前页面的主机名和一个随机生成的长度为 10 的字符串作为查询参数。
+  const url = `//${window.location.host}/version.json?id=${nanoid(10)}`;
+  // 使用 Axios 发起了一个 get 请求，获取版本信息的 json 文件。
+  try {
+    const res = await axios.get(url);
+    //   从响应数据中获取了版本号。
+    const version = res.data.version;
+    //   从本地存储中获取了之前保存的版本号
+    const localVersion = localStorage.getItem("version");
+    //   检查本地存储的版本号是否存在且与当前版本号不一致
+    if (localVersion && localVersion !== version) {
+      ElMessageBox.confirm("发现新的版本，请刷新页面后使用！", "系统提示", {
+        confirmButtonText: "立即刷新",
+        // cancelButtonText: this.$t('btn.cancel'),
+        showCancelButton: false,
+        closeOnClickModal: false,
+        type: "warning",
+      })
+        .then(() => {
+          localStorage.setItem("version", version);
+          window.location.reload();
+        })
+        .catch(() => {});
+    } else {
+      // 如果没有发现新版本，则仅将当前版本号保存到本地存储中。
+      // 这段代码的作用是在页面加载时检查是否有新版本可用，如果有新版本则重新加载页面以获取最新版本
+      localStorage.setItem("version", version);
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}

vite.config.ts

@@ -133,6 +133,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         // 指定symbolId格式
         symbolId: "icon-[dir]-[name]",
       }),
+      process.env.NODE_ENV === "production" && updateVersion(),
     ],
     // 预加载项目必需的组件
     optimizeDeps: {
@@ -252,3 +253,30 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     },
   };
 });
+// 打包文件时候 更新版本号 用作判断是否要刷新页面
+function updateVersion() {
+  console.log("upVer");
+  const fs = require("fs");
+  return {
+    name: "update-version",
+    buildStart() {
+      let version = "";
+      try {
+        // 读取 json 文件里面版本号
+        const packageJson = JSON.parse(
+          fs.readFileSync("public/version.json", "utf-8")
+        );
+        version = Number(packageJson.version);
+        version = (version + 0.1).toFixed(1); // 增加0.1并保留1位小数
+      } catch (error) {
+        console.log(error);
+      }
+      const versionData = { version: version.toString() }; // 根据需要生成新版本号
+      // 写入 json 文件里面版本号
+      fs.writeFileSync(
+        "public/version.json",
+        JSON.stringify(versionData, null, 2)
+      );
+    },
+  };
+}