// 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，優(yōu)化頁面性能" // 可選：版本更新說明
}

<template>
  <div id="app">
    <!-- 版本更新提示彈窗（默認隱藏） -->
    <div class="version-modal" v-if="showUpdate">
      <div class="modal-content">
        <h3>?? 版本更新提示</h3>
        <p>發(fā)現(xiàn)新版本（{{ 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 {
    // 請求服務(wù)器version.json（注意跨域問題，需配置服務(wù)器允許跨域）
    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); // 強制刷新，清除緩存
};

// 頁面初始化時執(zhí)行版本檢測
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;

// 創(chuàng)建Axios實例
const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 多環(huán)境配置
  timeout: 5000
});

// 請求攔截器：攜帶當前前端版本到請求頭
request.interceptors.request.use(
  (config) => {
    // 給所有請求添加版本頭
    config.headers['X-Frontend-Version'] = CURRENT_VERSION;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 響應(yīng)攔截器：攔截版本不匹配的響應(yīng)
request.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // 假設(shè)后端版本不匹配時，返回狀態(tài)碼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';

// 發(fā)起請求時，自動攜帶版本頭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);
  }
};

// 頁面初始化時請求接口，觸發(fā)版本校驗
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}`
    });
  }
  
  // 版本匹配，正常返回數(shù)據(jù)
  res.json({
    code: 200,
    data: [/* 用戶列表數(shù)據(jù) */],
    msg: '請求成功'
  });
});