Vue前端页面版本检测解决方案

// main.js（Vue3）
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
// 定义当前前端版本（与package.json的version一致）
app.config.globalProperties.$version = '1.0.0'; 
app.mount('#app');

{
  "latestVersion": "1.0.0", // 与前端package.json版本同步，上线时更新
  "updateDesc": "修复缓存bug，优化页面性能" // 可选：版本更新说明
}

<template>
  <div id="app">
    <!-- 版本更新提示弹窗（默认隐藏） -->
    <div class="version-modal" v-if="showUpdate">
      <div class="modal-content">
        <h3>📌 版本更新提示</h3>
        <p>发现新版本（{{ latestVersion }}），请刷新页面获取最新功能！</p>
        <button @click="handleRefresh">立即刷新</button>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';

const showUpdate = ref(false);
const latestVersion = ref('');
// 获取全局挂载的当前版本
const { appContext } = getCurrentInstance();
const currentVersion = appContext.config.globalProperties.$version;

// 版本检测核心方法
const checkVersion = async () => {
  try {
    // 请求服务器version.json（注意跨域问题，需配置服务器允许跨域）
    const response = await fetch('/version.json', { cache: 'no-cache' });
    const data = await response.json();
    latestVersion.value = data.latestVersion;
    // 对比本地版本与线上版本，不一致则显示更新提示
    if (currentVersion !== latestVersion.value) {
      showUpdate.value = true;
    }
  } catch (error) {
    console.error('版本检测失败：', error);
    // 检测失败不影响页面正常运行，仅控制台打印日志
  }
};

// 立即刷新页面
const handleRefresh = () => {
  window.location.reload(true); // 强制刷新，清除缓存
};

// 页面初始化时执行版本检测
onMounted(() => {
  checkVersion();
});
</script>

<style scoped>
.version-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-content {
  width: 300px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  text-align: center;
}
button {
  padding: 8px 20px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
}
</style>

// utils/request.js（Axios请求封装）
import axios from 'axios';

// 读取package.json中的版本号（也可手动定义）
import packageJson from '../package.json';
const CURRENT_VERSION = packageJson.version;

// 创建Axios实例
const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 多环境配置
  timeout: 5000
});

// 请求拦截器：携带当前前端版本到请求头
request.interceptors.request.use(
  (config) => {
    // 给所有请求添加版本头
    config.headers['X-Frontend-Version'] = CURRENT_VERSION;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器：拦截版本不匹配的响应
request.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // 假设后端版本不匹配时，返回状态码403，提示信息包含最新版本
    if (error.response?.status === 403 && error.response?.data?.msg.includes('版本')) {
      // 显示版本更新提示（可复用方案1的弹窗组件）
      const showUpdate = window.confirm(`${error.response.data.msg}，请立即刷新页面！`);
      if (showUpdate) {
        window.location.reload(true);
      }
    }
    return Promise.reject(error);
  }
);

export default request;

<script setup>
import request from '@/utils/request';

// 发起请求时，自动携带版本头X-Frontend-Version
const getUserList = async () => {
  try {
    const res = await request({
      url: '/api/user/list',
      method: 'get'
    });
    console.log('用户列表：', res.data);
  } catch (error) {
    console.error('请求失败：', error);
  }
};

// 页面初始化时请求接口，触发版本校验
getUserList();
</script>

// 后端示例（Node.js/Express）
app.get('/api/user/list', (req, res) => {
  // 后端记录的最新前端版本
  const LATEST_FRONTEND_VERSION = '1.0.1';
  // 获取前端请求头携带的版本
  const frontendVersion = req.headers['x-frontend-version'];
  
  // 版本校验：不匹配则返回403
  if (frontendVersion !== LATEST_FRONTEND_VERSION) {
    return res.status(403).json({
      code: 403,
      msg: `前端版本不匹配，当前最新版本为${LATEST_FRONTEND_VERSION}`
    });
  }
  
  // 版本匹配，正常返回数据
  res.json({
    code: 200,
    data: [/* 用户列表数据 */],
    msg: '请求成功'
  });
});