Vue实现版本检测与升级提示

// version.js
import packageinfo from '../package.json';

export default {
  version: packageinfo.version,
  buildtime: process.env.vue_app_build_time || '未知'
};

// services/versionservice.js
import axios from 'axios';
import versioninfo from '@/utils/version';

export default {
  /**
   * 检查应用版本
   * @returns {promise} 包含版本信息的promise
   */
  checkversion() {
    return axios.get('/api/version/check', {
      params: {
        currentversion: versioninfo.version,
        buildtime: versioninfo.buildtime,
        platform: navigator.platform,
        useragent: navigator.useragent
      }
    });
  }
};

<!-- components/versionchecker.vue -->
<template>
  <div v-if="showupdatenotice" class="version-update-notice">
    <div class="update-content">
      <h3>发现新版本 v{{ latestversion }}</h3>
      <p>{{ updatemessage }}</p>
      <div class="update-actions">
        <button @click="handleupdate" class="update-now-btn">立即更新</button>
        <button v-if="!forceupdate" @click="dismissupdate" class="dismiss-btn">稍后再说</button>
      </div>
    </div>
  </div>
</template>

<script>
import versionservice from '@/services/versionservice';
import versioninfo from '@/utils/version';

export default {
  name: 'versionchecker',
  data() {
    return {
      showupdatenotice: false,
      latestversion: '',
      currentversion: versioninfo.version,
      updatemessage: '',
      updateurl: '',
      forceupdate: false,
      checkinterval: null
    };
  },
  created() {
    // 初始检查
    this.checkversion();
    
    // 定时检查（每小时）
    this.checkinterval = setinterval(() => {
      this.checkversion();
    }, 60 * 60 * 1000);
  },
  beforedestroy() {
    // 清除定时器
    if (this.checkinterval) {
      clearinterval(this.checkinterval);
    }
  },
  methods: {
    async checkversion() {
      try {
        const response = await versionservice.checkversion();
        const { needupdate, latestversion, updatemessage, updateurl, forceupdate } = response.data;
        
        if (needupdate) {
          this.latestversion = latestversion;
          this.updatemessage = updatemessage || `新版本已发布，建议立即更新体验新功能`;
          this.updateurl = updateurl;
          this.forceupdate = forceupdate || false;
          this.showupdatenotice = true;
          
          // 如果是强制更新，可以禁用页面其他操作
          if (this.forceupdate) {
            document.body.classlist.add('force-update-mode');
          }
        }
      } catch (error) {
        console.error('检查版本失败:', error);
      }
    },
    handleupdate() {
      // 处理更新操作
      if (this.updateurl) {
        // 对于web应用，通常是刷新页面或跳转到更新页
        window.location.href = this.updateurl;
      } else {
        // 默认刷新页面获取最新资源
        window.location.reload(true);
      }
    },
    dismissupdate() {
      // 用户选择稍后更新
      this.showupdatenotice = false;
      
      // 可以记录到localstorage，避免频繁提醒
      localstorage.setitem('update_dismissed_' + this.latestversion, date.now().tostring());
    }
  }
};
</script>

<style scoped>
.version-update-notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.update-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.update-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.update-now-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.dismiss-btn {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* 强制更新模式 */
:global(body.force-update-mode) {
  overflow: hidden;
}
</style>

<!-- app.vue -->
<template>
  <div id="app">
    <router-view />
    <versionchecker />
  </div>
</template>

<script>
import versionchecker from '@/components/versionchecker.vue';

​​​​​​​export default {
  components: {
    versionchecker
  }
};
</script>

// node.js express示例
const express = require('express');
const router = express.router();
const semver = require('semver');

// 当前最新版本信息
const latest_version = {
  version: '1.5.0',
  releasedate: '2025-04-15',
  forceupdateversions: ['1.0.0', '1.1.0'], // 强制更新的版本
  updatemessage: '新版本修复了重要安全问题，建议立即更新',
  updateurl: 'https://your-app-url.com'
};

router.get('/api/version/check', (req, res) => {
  const { currentversion } = req.query;
  
  // 版本比较
  const needupdate = semver.lt(currentversion, latest_version.version);
  
  // 判断是否需要强制更新
  const forceupdate = latest_version.forceupdateversions.some(version => {
    return semver.satisfies(currentversion, version);
  });
  
  res.json({
    needupdate,
    currentversion,
    latestversion: latest_version.version,
    updatemessage: latest_version.updatemessage,
    updateurl: latest_version.updateurl,
    forceupdate,
    releasedate: latest_version.releasedate
  });
});

module.exports = router;

// 增量更新示例代码（electron应用）
import { autoupdater } from 'electron-updater';
import { ipcmain } from 'electron';

// 配置更新服务器
autoupdater.setfeedurl({
  provider: 'generic',
  url: 'https://your-update-server.com/updates/'
});

// 检查更新
function checkforupdates() {
  autoupdater.checkforupdates();
}

// 监听更新事件
autoupdater.on('update-available', (info) => {
  // 通知渲染进程有更新可用
  mainwindow.webcontents.send('update-available', info);
});

autoupdater.on('download-progress', (progressobj) => {
  // 通知渲染进程更新下载进度
  mainwindow.webcontents.send('download-progress', progressobj);
});

autoupdater.on('update-downloaded', (info) => {
  // 通知渲染进程更新已下载，可以安装
  mainwindow.webcontents.send('update-downloaded', info);
});

// 接收渲染进程的安装命令
ipcmain.on('install-update', () => {
  autoupdater.quitandinstall();
});

// 后端a/b测试版本分发逻辑
router.get('/api/version/check', (req, res) => {
  const { currentversion, userid } = req.query;
  
  // 根据用户id决定用户分组
  const usergroup = getusergroup(userid);
  
  // 获取该分组的最新版本
  const latestversionforgroup = getlatestversionforgroup(usergroup);
  
  // 版本比较
  const needupdate = semver.lt(currentversion, latestversionforgroup.version);
  
  res.json({
    needupdate,
    currentversion,
    latestversion: latestversionforgroup.version,
    updatemessage: latestversionforgroup.updatemessage,
    updateurl: latestversionforgroup.updateurl,
    forceupdate: latestversionforgroup.forceupdate
  });
});

function getusergroup(userid) {
  // 根据用户id哈希值分组
  const hash = createhash(userid);
  return hash % 100 < 50 ? 'a' : 'b';
}

​​​​​​​function getlatestversionforgroup(group) {
  // 不同组获取不同版本
  const versions = {
    'a': {
      version: '1.5.0',
      updatemessage: 'a组测试版本',
      updateurl: 'https://your-app-url.com/versiona',
      forceupdate: false
    },
    'b': {
      version: '1.5.1-beta',
      updatemessage: 'b组测试新功能',
      updateurl: 'https://your-app-url.com/versionb',
      forceupdate: false
    }
  };
  
  return versions[group];
}