【需求 17679】 feat: 加入更新推送插件

src/main.ts

@@ -11,6 +11,12 @@ import 'virtual:uno.css'
 import 'virtual:svg-icons-register'
 import SvgIcon from '@/components/common/SvgIcon/svgIcon.vue'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { loopGetVersion } from '@/plugins/pushUpdatePlugin'
+
+if (import.meta.env.MODE === 'production') {
+  loopGetVersion()
+}
+
 const app = createApp(App)
 app.use(createPinia())
 app.use(router)

src/plugins/pushUpdatePlugin.ts

+import type { Plugin } from 'vite'
+import fs from 'node:fs'
+import path from 'node:path'
+
+export default function pushUpdatePlugin(): Plugin {
+  return {
+    name: 'push-update-plugin',
+    apply: 'build',
+    writeBundle(options) {
+      const version = Date.now().toString()
+
+      const outDir = options.dir || path.resolve(process.cwd(), 'dist')
+      const filePath = path.resolve(outDir, 'version.json')
+      fs.writeFileSync(
+        filePath,
+        JSON.stringify({ version }, null, 2), // 存成 json
+        'utf-8',
+      )
+    },
+  }
+}
+
+async function getVersion() {
+  const res = await fetch('/version.json?t=' + Date.now())
+  const data = await res.json()
+  return data.version
+}
+
+export async function loopGetVersion() {
+  const version = await getVersion()
+  let hasShow = false
+  let timer: NodeJS.Timeout | null = null
+  timer = setInterval(async () => {
+    const newVersion = await getVersion()
+    if (newVersion === version) return
+    if (hasShow) {
+      if (timer) {
+        clearInterval(timer)
+      }
+      return
+    }
+    ElNotification({
+      title: '更新提示',
+      type: 'primary',
+      offset: 50,
+      duration: 0,
+      message: () =>
+        h('div', { class: 'flex items-center' }, [
+          '有新版本更新，请',
+          h(
+            ElLink,
+            {
+              type: 'primary',
+              underline: false,
+              onClick: () => {
+                window.location.reload()
+              },
+            },
+            '刷新',
+          ),
+          '页面',
+        ]),
+    })
+    hasShow = true
+  }, 10000)
+}

vite.config.ts

@@ -9,6 +9,7 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { visualizer } from 'rollup-plugin-visualizer'
 import UnoCSS from 'unocss/vite'
+import pushUpdatePlugin from './src/plugins/pushUpdatePlugin'
 
 import path from 'node:path'
 
@@ -46,6 +47,7 @@ export default defineConfig(({ mode }) => {
         symbolId: 'icon-[dir]-[name]',
       }),
       mode === 'development' && visualizer(), // 开发环境打包才需要
+      pushUpdatePlugin(),
     ],
     server: {
       // 是否开启 https
@@ -70,7 +72,7 @@ export default defineConfig(({ mode }) => {
           chunkFileNames: 'assets/js/[name]-[hash].js',
           manualChunks: (id) => {
             if (id.includes('node_modules')) {
-              console.log(id)
+              // console.log(id)
               if (id.includes('element-plus')) {
                 return 'element-plus'
               } else if (id.includes('vue')) {