前端部署后 页面自动提示用户页面刷新

1、src/utils文件中创建一个auto-update.js  //自动更新js文件

/**生产环境纯前端通过轮询来自动更新页面*/
let lastSrcs // 上一次获取到的script地址
let setTimeoutId
let DURATION = 3000

/**正则校验html中的src */
const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm

/**获取最新的html中的内容并将src=""中的数据拿出来*/
async function fetchScriptUrl() {
  try {
    const resp = await fetch('/?_timestamp=' + Date.now())
    const text = await resp.text()
    return text
  } catch (error) {
    return undefined
  }
}
/**对获取到的html中的src的内容进行操作 */
async function extractNewScripts() {
  const html = await fetchScriptUrl()
  scriptReg.lastIndex = 0
  let result = []
  let match
  while ((match = scriptReg.exec(html))) {
    result.push(match.groups.src)
  }
  return result
}
/**判断数组来确定是否需要刷新 */
async function needUpdate() {
  const newScripts = await extractNewScripts()
  if (!lastSrcs) {
    lastSrcs = newScripts
    return false
  }
  let result = false
  if (lastSrcs.length !== newScripts.length) {
    result = true
  }
  for (let i = 0; i < lastSrcs.length; i++) {
    if (lastSrcs[i] !== newScripts[i]) {
      result = true
      break
    }
  }
  lastSrcs = newScripts
  return result
}
/**执行自动检测，如果为true则刷新页面，也可以进行弹框提醒，可自行添加*/
async function autoUpdate() {
  setTimeoutId = setTimeout(async () => {
    const willUpdate = await needUpdate()
    console.log(willUpdate)
    if (willUpdate) {
      location.reload()
    }
    autoUpdate()
  }, DURATION)
}

function autoStop() {
  console.log('停止刷新')
  if (setTimeoutId) {
    clearTimeout(setTimeoutId)
    setTimeoutId = ''
  }
}

/**如果页面隐藏或离开，将不执行刷新，当回到当前页面再执行刷新 */
function autoRefresh() {
  document.addEventListener('visibilitychange', () => {
    hidden = document.hidden
    if (!hidden) {
      autoUpdate()
    } else {
      autoStop()
    }
  })
}

autoRefresh()

2、在main.js中直接引用

import '@/utils/auto-update'