自动检查线上版本是否更新，提示用户刷新页面

Y_Hg

于 2024-09-04 16:24:26 发布

阅读量652

点赞数 8

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/bushiaaa/article/details/141897076

版权

自动检查线上版本是否更新，提示用户刷新页面

参考： https://blog.csdn.net/weixin_59703592/article/details/138647171
实现思路：

public中创建version.json文件用于记录当前版本号
```
{
"version": "1.0"
}	
```

每次build时更新版本号

// vite.config.js
import path from 'path';
import fs from 'fs';
// 自动写入文件更新版本号
function updateVersion() {
  return {
    name: 'update-version',
    buildStart() {
      let version = ''
      try {
        // 读取json文件里面的版本号
        const packageJson = JSON.parse(fs.readFileSync(path.resolve('public/version.json'), 'utf-8'))
        version = Number(packageJson.version)
        console.log('version1', version);
        version = (version + 0.1).toFixed(1)
        console.log('version2', version);
        
      } catch (error) {
        console.log('vite.config.js updateVersion error',error);
      }
      const versionData = { version: version }
      // 写入json文件
      fs.writeFileSync('public/version.json', JSON.stringify(versionData))
    }
  }
}
export default ({ mode }) => {
  return {
    plugins: [
      process.env.NODE_ENV === 'production' && updateVersion() // 在pugins中引入
    ],
  };
};

每次在路由跳转后执行以下函数，读取最新版本号对比本地版本号

// 版本号管理工具
import axios from "axios";
export async  function isNewVersion() {
    // 获取当前页面url地址
    const url = `//${window.location.host}/version.json`;
    try {
        const res = await axios.get(url);
        // 获取线上版本号
        const newVersion = res.data.version
        // 获取本地版本号
        const localVersion = window.localStorage.getItem('version')
        // 判断线上和本地版本是否一致
        if(localVersion && localVersion !== newVersion) {
            
            // 不一致，提示用户刷新页面
            alert('有新版本发布，请刷新页面！')
            // 存储最新版本号到本地
            window.localStorage.setItem('version', newVersion)
            // 刷新页面
            window.location.reload()
        }else {
            // 如果本地没有存储版本号，则存储最新版本号
            window.localStorage.setItem('version', newVersion)
        }
    } catch (error) {
        console.log('获取线上版本号失败utils/version.js', error);
    }
}

在测试过程中发现，虽然可以更新版本号，但是在我的项目中使用的是自动化部署工具，只能在每次部署项目时更新打包后的版本号，不能更新上线分支中的版本号。也就是说假如当前master分支的版本号是1.0，每次上线部署后版本号都是1.1，而不会基于上次的版本号更新，因为master代码并没有更新过。

对于我的项目中的需求，只是需要用户刷新页面，所以其实可以将版本号换成一个时间戳，确保每次部署时的版本都是与之前的不一样就行了。