前端 项目更新通知 (plugin-web-update-notification)

项目版本更新迭代时,需提示用户更新系统,不然早时间不更新对用户体验很不好,所以在每次部署后需要提示用户,刷新静态资源。推荐插件 plugin-web-update-notification


.具体配置  vite.config.js文件中

import { webUpdateNotice } from '@plugin-web-update-notification/vite';
export default defineConfig(async ({ command, mode }) => {return {plugins: [webUpdateNotice({versionType: 'git_commit_hash',logVersion: true,hiddenDismissButton: true,notificationProps: {title: '📢系统更新通知',description: '检测到当前系统版本已更新,请刷新页面后使用',buttonText: '刷新',},notificationConfig: {placement: 'topRight',},}),]}
function webUpdateNotice(options?: Options): Pluginexport interface Options {/*** support 'git_commit_hash' | 'svn_revision_number' | 'pkg_version' | 'build_timestamp' | 'custom'* * if repository type is 'Git', default is 'git_commit_hash'* * if repository type is 'SVN', default is 'svn_revision_number'* * if repository type is 'unknown', default is 'build_timestamp'* */versionType?: VersionType/*** custom version, if versionType is 'custom', this option is required*/customVersion?: string/** polling interval(ms)* if set to 0, it will not polling* @default 10 * 60 * 1000*/checkInterval?: number/*** check update when window focus* @default true*/checkOnWindowFocus?: boolean/*** check update immediately after page loaded* @default true*/checkImmediately?: boolean/*** check update when load js file error* @default true*/checkOnLoadFileError?: boolean/*** whether to output version in console** you can also pass a function to handle the version* ```ts* logVersion: (version) => {*  console.log(`version: %c${version}`, 'color: #1890ff') // this is the default behavior* }* ```* @default true*/logVersion?: boolean | ((version: string) => void)/*** whether to silence the notification.* such as when local version is v1.0, you can set this option to true and build a new version v1.0.1, then the notification will not show*/silence?: boolean/*** @deprecated*/customNotificationHTML?: string/** notificationProps have higher priority than locale */notificationProps?: NotificationPropsnotificationConfig?: NotificationConfig/*** preset: zh_CN | zh_TW | en_US* @default 'zh_CN'* */locale?: string/*** custom locale data* @link default data: https://github.com/GreatAuk/plugin-web-update-notification/blob/main/packages/core/src/locale.ts*/localeData?: LocaleData/*** Whether to hide the default notification, if you set it to true, you need to custom behavior by yourself* ```tsdocument.body.addEventListener('plugin_web_update_notice', (e) => {const { version, options } = e.detail// write some code, show your custom notification and etc.alert('System update!')})* ```* @default false*/hiddenDefaultNotification?: boolean/*** Whether to hide the dismiss button* @default false*/hiddenDismissButton?: boolean/*** After version 1.2.0, you not need to set this option, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config** Base public path for inject file, Valid values include:* * Absolute URL pathname, e.g. /foo/* * Full URL, e.g. https://foo.com/* * Empty string(default) or ./** !!! Don't forget / at the end of the path*/injectFileBase?: string
}export type VersionType = 'git_commit_hash' | 'pkg_version' | 'build_timestamp' | 'custom'export interface NotificationConfig {/*** refresh button color* @default '#1677ff'*/primaryColor?: string/*** dismiss button color* @default 'rgba(0,0,0,.25)'*/secondaryColor?: string/** @default 'bottomRight' */placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
}export interface NotificationProps {title?: stringdescription?: string/** refresh button text */buttonText?: string/** dismiss button text */dismissButtonText?: string
}export type LocaleData = Record<string, NotificationProps>

 

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

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

相关文章

【力扣(LeetCode)】数据挖掘面试题0002:当面对实时数据流时您如何设计和实现机器学习模型?

文章大纲一、实时数据处理&#xff1a;构建低延迟的数据管道1. 数据接入与缓冲2. 实时清洗与校验3. 特征标准化与对齐二、模型设计&#xff1a;选择适配实时场景的模型架构1. 模型选择原则三、训练与更新策略&#xff1a;离线与在线协同&#xff0c;应对概念漂移1. 离线-在线协…

TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)

问题描述&#xff1a; 客户前端部署在nginx上&#xff0c;后端部署在tongweb8上&#xff08;相当于前后端分离&#xff09;&#xff0c;登录的时候报错&#xff0c;f12看network&#xff0c;状态码405&#xff0c;如下所示&#xff1a;看console&#xff0c;如下所示&#xff1…

mysql互为主从失效,重新同步

一、分别登录服务器A和服务器B的mysqlmysql -u root -p 123456789二、分别查看数据库状态信息,下边两项参数有一项为NO就表示同步异常Slave_IO_Running:从服务器&#xff08;Slave&#xff09;中的 I/O 线程的运行状态Slave_SQL_Running:从服务器上的 SQL 线程是否正在运行mysq…

板凳-------Mysql cookbook学习 (十一--------6)

https://blog.csdn.net/weixin_43236925/article/details/146382981 清晰易懂的 PHP 安装与配置教程 12.6 查找每组行中含有最大或最小值的行 mysql> set max_price (select max(price) from painting); Query OK, 0 rows affected (0.01 sec)mysql> select artist.name…

ECS由浅入深第四节:ECS 与 Unity 传统开发模式的结合?混合架构的艺术

ECS由浅入深第一节 ECS由浅入深第二节 ECS由浅入深第三节 ECS由浅入深第四节 ECS由浅入深第五节 尽管 ECS 带来了显著的性能和架构优势&#xff0c;但在实际的 Unity 项目中&#xff0c;完全摒弃 GameObject 和 MonoBehaviour 往往是不现实的。Unity 引擎本身的大部分功能&…

Mac关闭触控板

打开 “有鼠标或无线触控板时忽略内建触控板”选项即可 参考&#xff1a;Mac如何关闭触控板防止误触&#xff1f;内置的设置就可以达成 - Mac天空

Python:Rich 终端富文本与界面样式工具库

🖌️ 1、简述 Rich 是一个强大的 Python 库,用于在终端中呈现富文本和精美的格式,让命令行界面(CLI)应用拥有现代、美观的输出效果。本文将深入介绍 Rich 的核心功能,并通过一系列实际示例展示其强大能力。 Rich 由 Will McGugan 开发,主要特点包括: 丰富的文本样式:支…

深入解析享元模式:通过共享技术高效支持大量细粒度对象

深入解析享元模式&#xff1a;通过共享技术高效支持大量细粒度对象 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 总有一行代码&#xff0c;能点亮万千星辰。 &#x1f50d; 在技术的宇宙中&#xff0c;我愿做永不停歇的探索者。 ✨ 用代码丈量世…

Docker高级管理

一、Docker 容器的网络模式 当项目大规模使用 Docker 时&#xff0c;容器通信的问题也就产生了。要解决容器通信问题&#xff0c;必须先了解很多关于网络的知识。Docker 的网络模式非常丰富&#xff0c;可以满足不同容器的通信要求&#xff0c;下表列出了这些网络模式的主要信息…

ABP VNext + Tye:本地微服务编排与调试

ABP VNext Tye&#xff1a;本地微服务编排与调试 &#x1f680; &#x1f4da; 目录ABP VNext Tye&#xff1a;本地微服务编排与调试 &#x1f680;TL;DR ✨一、环境与依赖 &#x1f6e0;️二、核心配置详解 &#x1f680;1. 主配置 tye.yaml三、多环境文件 &#x1f331;&am…

Vue响应式原理一:认识响应式逻辑

核心思想&#xff1a;当数据发生变化时&#xff0c;依赖该数据的代码能够自动重新执行Vue中的应用&#xff1a;在data或ref/reactive中定义的数据&#xff0c;当数据变化时template会自动更新template的本质&#xff1a; 是render()函数, 用变化之后的数据重新执行render()函数…

Redis:分组与设备在 Redis 中缓存存储设计

一、缓存存储结构设计 分组与设备的映射关系&#xff08;使用 Set 结构&#xff09;&#xff1a; 键格式&#xff1a;采用 group:{groupId}:devices 的格式作为 Redis 中 Set 的键&#xff0c;例如 group:1:devices 就代表了分组 ID 为 1 的分组所关联的设备集合。值内容&#…

Leetcode 3605. Minimum Stability Factor of Array

Leetcode 3605. Minimum Stability Factor of Array 1. 解题思路2. 代码实现 题目链接&#xff1a;3605. Minimum Stability Factor of Array 1. 解题思路 这一题的核心思路是二分法&#xff0c;本质上就是我们给定一个常数kkk&#xff0c;然后考察是否存在一个构造使得能够…

编译安装的Mysql5.7报“Couldn‘t find MySQL server (mysqld_safe)“的原因 笔记250709

编译安装的Mysql5.7报"Couldn’t find MySQL server (mysqld_safe)"的原因 笔记250709 MySQL 的安装路径与配置文件&#xff08;如 my.cnf 或 mysql.server&#xff09;中指定的 basedir 不一致。 mysqld_safe 文件实际位置与系统查找路径不匹配&#xff08;常见于自…

在 Ubuntu 下配置 oh-my-posh —— 普通用户 + root 各自使用独立主题(共享可执行)

&#x1f9e9; 在 Ubuntu 下配置 oh-my-posh —— 普通用户 root 各自使用独立主题&#xff08;共享可执行&#xff09;✅ 目标说明普通用户 使用 tokyonight_storm 主题 root 用户 使用 1_shell 主题 共用全局路径下的 oh-my-posh 可执行文件 正确加载 Homebrew 到环境变量中…

Spring Boot 项目中的多数据源配置

关键词&#xff1a;Spring Boot、多数据源配置、MySQL、SQL Server、Oracle、动态切换 ✅ 摘要 在实际企业级开发中&#xff0c;一个 Spring Boot 项目可能需要连接多个数据库&#xff0c;比如 MySQL、SQL Server 和 Oracle。不同的业务模块可能依赖不同的数据源&#xff0c;这…

MATLAB/Simulink电机控制仿真代做 同步异步永磁直驱磁阻双馈无刷

以下是针对 MATLAB/Simulink 电机控制仿真 的系统性解决方案&#xff0c;涵盖 同步电机、异步电机、永磁电机、直驱电机、磁阻电机、双馈电机、无刷直流电机&#xff08;BLDC&#xff09; 的建模与控制策略实现&#xff0c;支持代做服务的技术细节和代码示例。一、电机建模与仿…

限流算法深度探索:从理论到实践的生产级避坑指南

凌晨3点&#xff0c;监控警报刺耳地尖叫着。我盯着屏幕上垂直下跌的服务可用性曲线&#xff0c;意识到那个被忽视的限流配置项终于引爆了——每秒1000次的支付请求正像洪水般冲垮我们的系统。这次事故让我深刻理解&#xff1a;限流不是可选项&#xff0c;而是分布式系统的生存法…

企业级后台管理系统的困境与飞算 JavaAI 的破局之道

企业级后台管理系统如 CRM&#xff08;客户关系管理系统&#xff09;、ERP&#xff08;企业资源计划系统&#xff09;已成为支撑企业高效运转的核心骨架。它们如同企业的 “神经中枢”&#xff0c;串联起客户数据、财务信息、供应链流程等关键环节&#xff0c;为决策制定、业务…

快速上手百宝箱搭建知识闯关游戏助手

引言&#xff1a;让学习更有趣&#xff0c;AI 赋能知识闯关新体验 1.在信息爆炸的时代&#xff0c;传统的填鸭式教学方式已难以满足现代用户对高效、个性化和趣味化学习的需求。越来越多的学习者倾向于通过互动性强、参与感十足的方式获取知识。在此背景下&#xff0c;游戏化学…