✨ feat(Vite): 添加@plugin-web-update-notification/vite实现前端更新通知

Web/package.json

@@ -58,6 +58,7 @@
 		"xlsx-js-style": "^1.2.0"
 	},
 	"devDependencies": {
+		"@plugin-web-update-notification/vite": "^1.7.1",
 		"@types/lodash-es": "^4.17.12",
 		"@types/node": "^20.12.2",
 		"@types/nprogress": "^0.2.3",

Web/vite.config.ts

@@ -8,7 +8,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import { CodeInspectorPlugin } from 'code-inspector-plugin';
 import fs from 'fs';
 import { visualizer } from 'rollup-plugin-visualizer';
-
+import { webUpdateNotice } from '@plugin-web-update-notification/vite';
 const pathResolve = (dir: string) => {
 	return resolve(__dirname, '.', dir);
 };
@@ -30,6 +30,17 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 			}),
 			vue(),
 			vueJsx(),
+			webUpdateNotice({
+				notificationConfig: {
+					placement: 'topLeft',
+				},
+				notificationProps: {
+					title: '📢 系统更新',
+					description: '系统更新啦！请刷新页面',
+					buttonText: '刷新',
+					dismissButtonText: '忽略',
+				},
+			}),
 			vueSetupExtend(),
 			viteCompression({
 				verbose: true, // 是否在控制台中输出压缩结果

docker/nginx/conf/nginx.conf

@@ -32,6 +32,10 @@ http {
             root   /usr/share/nginx/html;
             try_files $uri $uri/ /index.html;
             index  index.html index.htm;
+            # 如果缓存了 index.html ，刷新后可能仍会出现更新通知，因此需要禁用 index.html 的缓存。这也是部署 SPA 应用程序的最佳做法。
+			if ( $uri = '/index.html' ) { # disabled index.html cache
+			    add_header Cache-Control "no-cache, no-store, must-revalidate";
+			}
         }