9 changed files with 67 additions and 16 deletions
@ -0,0 +1,48 @@ |
|||
# 检查更新 |
|||
|
|||
## 介绍 |
|||
|
|||
当网站更新时,你可能会想要检查更新,框架提供了这个能力,通过轮训检查更新,你可以在应用的 `preferences.ts` 文件中配置 `checkUpdatesInterval` 和 `enableCheckUpdates` 字段,用于开启和设置检查更新的时间间隔,单位为`分钟`。 |
|||
|
|||
```ts |
|||
import { defineOverridesPreferences } from '@vben/preferences'; |
|||
|
|||
export const overridesPreferences = defineOverridesPreferences({ |
|||
// overrides |
|||
app: { |
|||
// 是否开启检查更新 |
|||
enableCheckUpdates: true, |
|||
// 检查更新的时间间隔,单位为分钟 |
|||
checkUpdatesInterval: 1, |
|||
}, |
|||
}); |
|||
``` |
|||
|
|||
## 效果 |
|||
|
|||
当检测到更新时,会弹出提示框,提示用户是否刷新页面: |
|||
|
|||
 |
|||
|
|||
## 替换为检测 |
|||
|
|||
如果你需要通过其他方式检查更新,比如通过接口,以便更灵活的控制更新的逻辑,可以做到强制刷新、显示更新内容等,你可以通过修改 `@vben/layouts` 下面的 `src/widgets/check-updates/check-updates.vue`文件来实现。 |
|||
|
|||
```ts |
|||
// 这里可以替换为你的检查更新逻辑 |
|||
async function getVersionTag() { |
|||
try { |
|||
const response = await fetch('/', { |
|||
cache: 'no-cache', |
|||
method: 'HEAD', |
|||
}); |
|||
|
|||
return ( |
|||
response.headers.get('etag') || response.headers.get('last-modified') |
|||
); |
|||
} catch { |
|||
console.error('Failed to fetch version tag'); |
|||
return null; |
|||
} |
|||
} |
|||
``` |
|||
|
After Width: | Height: | Size: 400 KiB |
Loading…
Reference in new issue