vue2项目在发布后更新,提示用户刷新页面

1、在项目根目录创建resetVersion.js的文件,内容如下
(具体路径可能会有点问题,但是不影响)

const path = require('path');
const fsExtra = require('fs-extra');const runBuild = async () => {try {const OUTPUT_DIR = 'public'; // 输出目录(相对当前文件位置)const FILENAME = 'version.json'; // 文件名const versionJson = { // 文件内容version: 'V' + new Date().getTime(),};fsExtra.outputJson(path.resolve(__dirname, `${OUTPUT_DIR}/${FILENAME}`), versionJson, (err) => {if (err) {console.error('Failed to write version.json:', err);} else {console.log('version.json has been successfully generated.');}})} catch (error) {process.exit(1);}
};runBuild();

2、在package.json的build命令中 && node resetVersion.js

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build && node resetVersion.js","lint": "vue-cli-service lint"},

3、在路由的页面添加路由守卫监听页面是否跟新

import axios from 'axios';
router.afterEach(async (to) => {const url = '/version.json?v=' + new Date().getTime();const response = await axios.get(url);const serverVersion = response.data ? response.data.version : null; const localVersion = localStorage.getItem('vmp_version');// 新旧版本号对比if (serverVersion && serverVersion !== localVersion) {localStorage.setItem('vmp_version', serverVersion);// 此处自定义弹窗提示// window.location.reload();alert('更新了')} else {localStorage.setItem('vmp_version', serverVersion);}
});

4、具体就打包发布—就此运行成功
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/459704.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebGIS开发丨从入门到进阶,全系列课程分享

WebGIS开发所需的技能 1.前端技能:Html、CSS、 Javascript、WebAPLs、Vue 2.二维技能:WebGIS基础理论及开发、MapGIS二次开发Openlayers、Leaflet、Mapbox 、Echarts、公共开发平台开发等 3.三维技能:Blender、Three.js、Cesium等 Web开发…

17 Docker容器存储架构:docker存储持久化-bind mount

文章目录 三、docker存储持久化-bind mount3.1 将 /root/htdocs 目录下的 index.html 文件挂载给一个 httpd 容器3.2 更新宿主机上的 index.html 文件内容,并查看容器中的内容3.3 查看挂载类型3.4 创建基于 docker volume 的 container 镜像3.5 删除容器,销毁容器后,volume 依…

centos7 zabbix监控nginx的pv和uv和status_code

zabbix监控nginx的pv: pv)cat /var/log/nginx/access.log|awk {print $1}|wc -l;;zabbix-get验证: [rootbogon ~]# zabbix_get -s 192.168.253.231 -k pv_uv[pv] 100zabbix监控nginx的uv uv)cat /var/log/nginx/access.log|awk {print $1}|uniq -c | w…

C++进阶-->多态(Polymorphism)

1. 多态的概念 多态,顾名思义多种形态;多态分为编译时多态(静态多态)和运行时多态(动态多态),静态多态就是就是我们前面讲的函数重载和函数模板,可以通过传不同类型,然后…

虚拟机桥接模式连不上,无法进行SSH等远程操作

说明:以下情况在window10上遇到,解决后顺便做了个笔记,以防后续再次用到,也给同道中人提供一个解决方案 一、首先按照以下步骤进行检查 1、是否连接了对应的wifi 2、是否设置了桥接模式 3、上述1、2确认无误的情况下请查看右上…

Flutter Image和Text图文组件实战案例

In this section, we’ll go through the process of building a user interface that showcases a product using the Text and Image widgets. We’ll follow Flutter’s best practices to ensure a clean and effective UI structure. 在本节中,我们将使用“Te…

使用Kubernetes管理容器化应用

使用Kubernetes管理容器化应用 Kubernetes简介 安装Kubernetes 安装Minikube 启动Minikube集群 创建一个简单的Web应用 创建项目目录 初始化项目 安装Node.js依赖 创建Docker镜像 编写Dockerfile 构建并推送Docker镜像 创建Kubernetes配置文件 创建Deployment 创建Service …

<十六>Ceph mon 运维

Ceph 集群有故障了,你执行的第一个运维命令是什么? 我猜测是ceph -s 。无论执行的第一个命令是什么,都肯定是先检查Mon。 在开始之前我们有必要介绍下Paxos协议,毕竟Mon就是靠它来实现数据唯一性。 一: Paxos 协议 1…

计算机网络-MSTP的基础概念

前面我们大致了解了MSTP的由来,是为了解决STP/RSTP只有一根生成树导致的VLAN流量负载分担与次优路径问题,了解MSTP采用实例映射VLAN的方式实现多实例生成树,MSTP有很多的理论概念需要知道,其实与其它的知识一样理论复杂配置还好的…

电源完整性

电源分配系统 电源分配系统:Power Distribution Network(简称 PDN) 真正用电节点在 Die,所以PDN系统包含 PCB 和 Package上的部分 PCB 上:VRM、大电容、小电容、电源平面、地平面 Package内:电容、电源平面、地平面 电源噪声的产生 稳压电源芯片本身的输出不恒定&a…

基于SpringBoot云养鸡互动平台的设计与实现

前言 对于当今社会的人们来说,互联网技术是必不可少的,随着经济和技术的不断发展,计算机已经深入到各个领域。云养鸡互动平台将人们的时间需求与计算机技术结合起来,架起一座桥梁,使云养鸡互动更加方便快捷。云养鸡互…

枫清科技仲光庆:AI+行业新范式,双轮驱动助力数智化升级

10月23日,由财视传媒主办,未来图灵、尚品新消费、未来企业家俱乐部、传播达人汇联合主办的“赢在大模型时代”2024未来发布论坛暨“向上拾年”财视十周年盛典在北京举行。枫清科技联合创始人兼 CPO 仲光庆应邀出席并分享了“AI行业落地新范式”&#xff…

谷歌云GCP基础概念讲解

概览 云的基础是虚拟化:服务器,存储,网络。服务器是远程计算机的逻辑分区。存储是物理硬盘的逻辑划分。网络则是虚拟私有云。 谷歌是唯一一个拥有全球私有基础设施的公司;他们的谷歌云基础设施没有任何一部分通过公共互联网。换句…

【ACM出版,EI稳定检索,九大高校联合举办, IEEE Fellow支持】2024年计算机视觉与艺术研讨会(CVA 2024)

在线投稿:学术会议-学术交流征稿-学术会议在线-艾思科蓝 2024年计算机视觉与艺术国际学术会议(CVA 2024)作为2024年人工智能、数字媒体技术与交互设计国际学术会议(ICADI 2024)的分会。此次大会旨在汇聚全球在计算机视觉与艺术…

Java知识巩固(十二)

I/O JavaIO流了解吗? IO 即 Input/Output,输入和输出。数据输入到计算机内存的过程即输入,反之输出到外部存储(比如数据库,文件,远程主机)的过程即输出。数据传输过程类似于水流,因…

基于SSM+小程序的智慧旅游平台登录管理系统(旅游2)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 旅游平台开发微信小程序功能有管理员和用户。 1、管理员功能有个人中心,用户管理,景点分类管理,旅游景点管理,景点购票管理,景…

我谈Canny算子

在Canny算子的论文中,提出了好的边缘检测算子应满足三点:①检测错误率低——尽可能多地查找出图像中的实际边缘,边缘的误检率(将边缘识别为非边缘)低,且避免噪声产生虚假边缘(将非边缘识别为边缘…

量子容错计算

基本思想 容错量子计算的基本想法是,在合理编码后的量子态上直接量子计算,以至于不完全需要解码操作。假设有一个简单的量子电路,但不幸的是噪声影响着这个电路的每一个元件,包括量子态的制备、量子逻辑门、对输出的测量&#x…

代码随想录算法训练营第十一天(补) 栈与队列| 后序表达式、滑动窗口、高频元素、链表总结

目录 一、150. 逆波兰表达式求值 二、239. 滑动窗口最大值 三、347.前 K 个高频元素 四、总结 一、150. 逆波兰表达式求值 力扣题目链接(opens new window) 根据 逆波兰表示法,求表达式的值。 有效的运算符包括 , - , * , / 。每个运算对象可以是整数&#x…

【论文阅读】SRGAN

学习资料 论文题目:基于生成对抗网络的照片级单幅图像超分辨率(Photo-Realistic Single Image Super-Resolution Using a Generative Adversarial Network)论文地址:https://arxiv.org/abs/1609.04802 代码:GitHub - x…