今天用户反馈使用页面的时候,有时候点击没反应,排查下来,是因为发布版本的时候,用户那边没有加载最新的文导致的,然后根据思路,做了这个自动更新的功能
效果预览
http://demo.webwlx.cn/#/update
实现思路
1. 把当前版本的编译时间,通过环境变量的方式保存起来
打开 vite.config.js
import dayjs from "dayjs";
import fs from "fs";
// 获取当前时间戳
const VERSION_TIME = dayjs().format("YYYY-MM-DD HH:mm:ss");
// 把 VERSION_TIME 写入到 public/version.json 文件中
fs.writeFileSync("./public/version.json", JSON.stringify({ VERSION_TIME }));
export default defineConfig({
// 添加环境变量
define: {
"import.meta.env.VERSION_TIME": JSON.stringify(VERSION_TIME),
},
});
2.封装 update.vue,我这里使用的是 antd 的弹窗,如果其他组件库可自行修改
<template>
<!-- <a-button @click="startUpdate" type="primary">更新</a-button> -->
<a-modal
v-model:visible="updateDialog"
width="300px"
:footer="null"
title="更新提示"
:closable="false"
:keyboard="false"
:maskClosable="false"
>
<h1 class="text-xl">发现新版本</h1>
<p class="mt-2">
发布时间:<span class="text-red-500">{{ newVersionTime }}</span>
</p>
<a-button type="primary" shape="round" class="ml-auto mr-auto mt-10 block"
>{{ count }} 秒后 更新</a-button
>
</a-modal>
</template>
<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import dayjs from 'dayjs';
const interCheck = ref(null);
const count = ref(5);
const newVersionTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
const updateDialog = ref(false);
function startCheck() {
// 每 3s 检查一次更新
if (!interCheck.value) {
interCheck.value = setInterval(() => {
checkVersion();
}, 5000);
}
}
function endCheck() {
clearInterval(interCheck.value);
interCheck.value = null;
}
async function checkVersion() {
// axios.defaults.headers 不加载缓存
const publicVersion = await axios.get(location.origin + '/version.json?t=' + Date.now(), {
headers: {
'Cache-Control': 'no-cache',
Pragma: 'no-cache',
Expires: '-1',
},
});
const NEW_VERSION_TIME = publicVersion.data.VERSION_TIME;
const VERSION_TIME = import.meta.env.VERSION_TIME;
if (NEW_VERSION_TIME && new Date(NEW_VERSION_TIME) > new Date(VERSION_TIME)) {
endCheck();
newVersionTime.value = NEW_VERSION_TIME;
startUpdate();
}
}
async function startUpdate() {
// 开始自动更新倒计时
count.value = 5;
updateDialog.value = true;
// 倒计时
const timer = setInterval(() => {
count.value--;
if (count.value === 1) {
clearInterval(timer);
// 强制刷新页面
location.reload(true);
}
}, 1000);
}
onMounted(() => {
startCheck();
});
</script>
3.在app.vue
引入
<template>
<Update></Update>
<div id="app">
<router-view></router-view>
</div>
</template>
<script setup>
import Update from "./components/update.vue";
</script>
标签:Vue,const,dayjs,value,VERSION,自动更新,TIME,import,页面
From: https://www.cnblogs.com/wp-leonard/p/17867314.html