明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
随笔 - 1274, 文章 - 0, 评论 - 214, 阅读 - 319万
  博客园  :: 首页  :: 管理
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

概要

        我们做一个纯前端自动提示用户刷新页面的功能,这个功能主要是防止用户的js代码还是旧版的导致某些功能没能及时更新。

整体架构流程

1、我们先在 public/version.json 创建这个json文件,用来存储版本号

{
  "version": "1.0"
}

2、我们可以在 vite.config.js 文件里面写这个自动写入文件更新版本号方法

复制代码
// 打包文件时候 更新版本号 用作判断是否要刷新页面
function updateVersion() {
    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));
        },
    };
}
复制代码

我们在 vite.config.js 文件里的defineConfig里面的plugin里面引入这个函数

tip:为什么要写成下面那样呢!如果我们在跑项目时候也会执行updateVersion()这个函数,我们版本号会变得很大,所以我们要在打包更新时候再执行updateVersion()这个函数才是我们需要的!

process.env.NODE_ENV === 'production' && updateVersion(),

 

3、我们可以在 utils/version.js 写一个公共方法判断 本地存储版本是否是最新版本的,而判断时间是在每次路由跳转之后执行

复制代码
// utils/version.js
 
import axios from 'axios';
// 生成一个随机的字符串作为请求的查询参数
import { nanoid } from 'nanoid';
import {  MessageBox } from 'element-ui';
 
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 ) {
        MessageBox.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);
  }
 
}
复制代码

 

router.afterEach(() => {
    // 在路由切换时候进行判断版本号是否更新 提示用户刷新页面
    isNewVersion();
});

 

相关博文:
阅读排行:
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
历史上的今天:
2021-01-14 mysql update 的时候使用left join和where语句
点击右上角即可分享
微信分享提示