页面版本更新

前端页面版本更新了，应该怎么通知用户。

首先通过脚手架，设置一个时间戳

module.exports = {
  define: {
    __DATA__: {
      ...other,
      time: Date.now(), // 时间字段
    },
  },
}

再向外暴露出拿取时间的方法

export async function getLatestPublishData(path) {
  if (process.env.NODE_ENV === 'development') {
    return {}
  }
  try {
    let url = ''
    if (path) {
      url = path
    } else if (config.publicPath && config.publicPath !== '/') {
      url = config.publicPath
    } else {
      url = window.location.origin
    }
    const res = await window.__HTTP__.get(`${url}/data.json`, { original: true })
    return res.data || {}
  } catch {
    return {}
  }
}

项目中调用

  useEffect(() => {
    if (process.env.NODE_ENV !== 'development') {
      getLatestPublishData().then((res) => {
        if (res.time && res.time !== __DATA__.time) {
          Modal.info({
            width: 450,
            title: '检测到系统有更新，请点击升级获取最新版本',
            okText: '升级',
            onOk: () => {
              return new Promise(() => {
                setTimeout(() => {
                  message.success('升级成功,即将刷新页面').then(() => {
                    window.location.reload()
                  })
                }, 3000)
              })
            },
          })
        }
      })
    }
  }, [])