首页 > 其他分享 >Vue 项目配置自动更新,自动刷新页面

Vue 项目配置自动更新,自动刷新页面

时间:2023-11-30 14:46:40浏览次数:64  
标签:Vue const dayjs value VERSION 自动更新 TIME import 页面

今天用户反馈使用页面的时候,有时候点击没反应,排查下来,是因为发布版本的时候,用户那边没有加载最新的文导致的,然后根据思路,做了这个自动更新的功能


效果预览

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

相关文章

  • vue3页面中,两个相同组件,一个卸载,一个挂载,后展示的组件事件监听不生效?
    场景:在实际开发中,遇到了这样一种场景,vue3页面,两个相同组件,在满足某条件下展示第一个组件,满足另一个条件下,隐藏第一个组件,同时展示第二个组件,比如反馈组件,会通过window.addEventListener来监听自定义的反馈弹窗展示和隐藏事件。结果:两个相同组件一个卸载,一个挂载,第一个组监听的......
  • 关于vue中的动态组件component和keep-alive
    component标签是vue内置的,作用:组件的占位符<componentis="组件名称"></component>其中is属性的值表示要渲染的组件的名字,也就是components节点下的组件名称当我们动态切换组件名称时,每切换一次,组件就会被销毁一次,若不想让组件被销毁,则需要用到标签keep-alive<keep-al......
  • 在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯
    转载于在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯-DCloud问答uni-app的web-view组件,支持加载远程网页,在app环境下,还支持加载本地HTML页面。在web-view加载页面中,会涉及wx、plus、uni等对象的使用。在小程序下使用wx的api,需要引入微信提供的https......
  • Vue 嵌套选项卡 购物车
    嵌套选项卡  <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width,initial-scale=1"> <scriptsrc="js/vue.js"></scrip......
  • 每日一练:通过广播信道实现跨页面通信
    利用广播通道实现标签页通信1.什么是广播通道广播通道是一种新的浏览器原生API,它可以让你在同源的标签页之间传递消息。这个API的目的是为了让开发者可以在不同的标签页之间共享数据,而不需要使用LocalStorage或者其他的存储方式。2.广播通道的使用2.1创建广播通道constchannel......
  • vue-treeselect使用案例
    https://vue-treeselect.js.org/父子节点没有关联<TreeSelectflatstyle="background-color:#0e3977"placeholder="请选择"v-model="org":multiple="true":options="state.orgData&qu......
  • 2023-11-30 记录实用小案例 —— react监听页面返回时执行事件
    useEffect(()=>{consthandlePageBack=()=>{//此处写你想要触发的事件};//监听浏览器的popstate事件,即页面返回事件window.addEventListener('popstate',handlePageBack);//在组件卸载时移除事件监听return()=>{......
  • 【Azure Cache for Redis】Redis的导出页面无法配置Storage SAS时通过az cli来完成
    问题描述在AzureRedis的导出页面,突然不能配置StorageAccount的SAS作为授权方式。那么是否可以通过AZCLI或者是Powershell来实现SAS的配置呢? 问题解答可以的。使用  azredisexport 可以实现azredisexport--container--prefix[--auth-......
  • 【Azure Cache for Redis】Redis的导出页面无法配置Storage SAS时通过az cli来完成
    问题描述在AzureRedis的导出页面,突然不能配置StorageAccount的SAS作为授权方式。那么是否可以通过AZCLI或者是Powershell来实现SAS的配置呢? 问题解答可以的。使用  azredisexport 可以实现azredisexport--container--prefix[--auth-......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router
    项目代码同步至码云weiz-vue3-templateVueRouter是Vue.js的官方路由。它与Vue.js核心深度集成,让用Vue.js构建单页应用变得轻而易举。1.安装npmivue-router@42.集成1.新建两页面进行示例在src/view下新建home.vue和login.vue,内容如下:<scriptsetuplang="t......