menduner/src/App.vue

<script setup>
import { RouterView } from 'vue-router'
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import Confirm from '@/plugins/confirm'
import axios from 'axios'
import { vue_version } from './version.js'
import { useSystem } from '@/store/system'

const { setTimeDifference } = useSystem()
const timer = ref(null)
// const setFn = ref()
const setIntervalTime = 3000 // 接口调用间隔时间

function open () {
  if (timer.value) clearInterval(timer.value)
  timer.value = setInterval(() => { checkVersion() }, setIntervalTime)
}
onMounted(() => {
  nextTick(() => {
    const process_ENV = import.meta.env.VITE_USER_NODE_ENV || ''
    if (process_ENV === 'production') {
      console.log(vue_version) // 打印版本号
      open()
    }
  })
})
onUnmounted(() => {
  if (timer.value) clearInterval(timer.value)
})


// window.location.reload()                      // 方法会根据缓存的有效期和修改时间，决定是否重新从服务器下载内容。如果缓存的内容没有过期或没有修改，就会直接使用缓存，这样可以节省流量和时间
// window.location.reload(true)                  // true参数会忽略缓存的内容，强制重新从服务器下载所有内容.包括 JavaScript 文件，图像，文本文件等。这样可以保证显示网页的最新内容，但是会消耗更多的流量和时间。
// window.location.replace(window.location.href) // 方法会把浏览器中的临时文件夹的文件删除再重新从服务器下载。这样可以清除一些可能造成问题的缓存文件，但是也会消耗更多的流量和时间。

const getVersion = () => {
  return new Promise((resolve, reject) => {
    const baseUrl = import.meta.env.VITE_BASE_URL || ''
    const tenantId = import.meta.env?.VITE_TENANTCODE || ''
    axios.get(`${baseUrl}/app-api/menduner/system/get/version`, {
      headers: { ['tenant-id']: tenantId },
      cache: 'no-store' // 禁用缓存
    }).then(resolve)
  })
}

getVersion().then(({ data }) => {
  const _now = new Date().getTime()
  const { time } = data?.data
  // 设置浏览器和服务器时间差
  setTimeDifference(time - _now)
})

let ConfirmDone = false
// 检查版本号
const checkVersion = () => {
  const baseUrl = import.meta.env.VITE_BASE_URL || ''
  // const env_v = import.meta.env?.VITE_VERSION || ''
  const tenantId = import.meta.env?.VITE_TENANTCODE || ''
  const get_v = localStorage.getItem('RES_VERSION') || ''
  // 
  if (!baseUrl || !vue_version || !tenantId) return

  getVersion().then(({ data }) => {
    const { version, time } = data?.data
    if (!version || version === vue_version ) { // 接口报错和版本一致不弹Confirm
      return
    }
    if (ConfirmDone) {
      return
    }
    if (version === get_v && version !== vue_version) { // reload(true)刷新不成功，清除缓存刷新
      localStorage.clear()
      window.location.replace(window.location.href)
      return
    }
    ConfirmDone = true  // 后续不弹Confirm
    Confirm('系统提示', '发现新版本，将立即刷新页面', { hideCancelBtn: true }).then(() => {
      localStorage.setItem('RES_VERSION', version)
      window.location.reload(true)
    })
  }).catch(err => {
    console.log('checkVersion-err', err)
  })
}
</script>

<template>
  <v-app>
    <RouterView />
  </v-app>
</template>

<style scoped>
</style>