前端 項目更新通知 (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
英文地址,請注明出處:http://en.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;游戲化學…