Vite+Vue3增加版本号记录(验证线上环境是否已更新到最新版本)

这篇文章距离上次修改已过270天，其中的内容可能已经有所变动。

在Vite+Vue3项目中增加版本号记录并验证线上环境是否已更新到最新版本，可以通过以下步骤实现：

在项目中的某个地方（如index.html或main.js）定义一个全局变量来记录版本号。

// main.js 或 index.html
const VERSION = '1.0.0'; // 替换为项目的实际版本号

在入口文件（如main.js）中，通过环境变量来判断是否为生产环境，如果是生产环境，则发送一个请求到服务器端的接口，该接口返回当前应用的版本号，客户端用这个版本号与本地记录的版本号进行比较。

// main.js
import { ref } from 'vue';
import { checkVersion } from './utils/versionCheck';

const currentVersion = ref(VERSION); // 从环境中读取或者直接定义版本号

if (process.env.NODE_ENV === 'production') {
  checkVersion(currentVersion.value).then((isLatest) => {
    if (!isLatest) {
      console.error('您的网站版本已过时，请更新至最新版本！');
    }
  });
}

创建versionCheck.js工具文件，用于发送请求并比较版本号。

// utils/versionCheck.js
import axios from 'axios';

export function checkVersion(currentVersion) {
  return axios.get('/api/version-check', { params: { version: currentVersion } })
    .then(response => response.data.version === currentVersion)
    .catch(() => true); // 默认假设服务器可达，避免版本检查影响正常使用
}

服务器端需要有一个接口来提供最新的版本号，客户端会与这个版本号进行比较。

// 假设使用Express作为服务器端框架
app.get('/api/version-check', (req, res) => {
  const latestVersion = '1.0.1'; // 替换为服务器端获取到的最新版本号
  res.json({ version: latestVersion });
});

确保服务器端的版本号与实际发布的版本号保持一致，这样客户端在每次页面加载时都会与服务器端的版本号进行比较，如果发现不一致，则可以在控制台输出一个错误信息提示用户需要更新版本。

Vite+Vue3增加版本号记录(验证线上环境是否已更新到最新版本)

评论已关闭

推荐阅读