refactor:新版本 Vite 中需要使用不同的方案禁用热更新

free8 · Dec 24, 2023 · 568dbbe · 568dbbe
1 parent c40035c
commit 568dbbe
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 33 deletions.
diff --git a/web/src/utils/vite.ts b/web/src/utils/vite.ts
@@ -1,3 +1,5 @@
+import { Plugin } from 'vite'
+
 /**
  * 是否在开发环境
  */
@@ -11,3 +13,41 @@ export function isDev(mode: string): boolean {
 export function isProd(mode: string | undefined): boolean {
     return mode === 'production'
 }
+
+/**
+ * 自定义热更新处理插件
+ */
+export const customHotUpdate = (): Plugin => {
+    const closeHmr = new Map<string, boolean>()
+
+    return {
+        name: 'vite-plugin-custom-hot-update',
+        configureServer(server) {
+            server.ws.on('custom:close-hot', (data) => {
+                closeHmr.set(data.type, true)
+
+                // 关闭文件添加和删除的监听
+                server.watcher.removeAllListeners('add')
+                server.watcher.removeAllListeners('unlink')
+            })
+            server.ws.on('custom:open-hot', (data) => {
+                closeHmr.set(data.type, false)
+
+                server.watcher.on('add', () => {
+                    server.restart()
+                })
+                server.watcher.on('unlink', () => {
+                    server.restart()
+                })
+            })
+        },
+        handleHotUpdate() {
+            const closeHmrs = Array.from(closeHmr.values())
+            let closeHmrsBool = false
+            for (const key in closeHmrs) {
+                closeHmrsBool = closeHmrsBool || closeHmrs[key]
+            }
+            if (closeHmrsBool) return []
+        },
+    }
+}
diff --git a/web/src/views/backend/crud/index.vue b/web/src/views/backend/crud/index.vue
@@ -5,30 +5,26 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onActivated, onDeactivated, onUnmounted } from 'vue'
 import Start from '/@/views/backend/crud/start.vue'
 import Design from '/@/views/backend/crud/design.vue'
 import { state } from '/@/views/backend/crud/index'
-import { useI18n } from 'vue-i18n'
 
 defineOptions({
     name: 'crud/crud',
     components: { Start, Design },
 })
 
-const { t } = useI18n()
-onMounted(() => {
-    if (import.meta.hot) {
-        import.meta.hot.on('vite:beforeFullReload', () => {
-            throw t('This is a deliberate error thrown to prevent a hot update of Vite')
-        })
-        import.meta.hot.on('vite:beforeUpdate', () => {
-            throw t('This is a deliberate error thrown to prevent a hot update of Vite')
-        })
-        import.meta.hot.on('vite:beforePrune', () => {
-            throw t('This is a deliberate error thrown to prevent a hot update of Vite')
-        })
-    }
+onActivated(() => {
+    if (import.meta.hot) import.meta.hot.send('custom:close-hot', { type: 'crud' })
+})
+
+onDeactivated(() => {
+    if (import.meta.hot) import.meta.hot.send('custom:open-hot', { type: 'crud' })
+})
+
+onUnmounted(() => {
+    if (import.meta.hot) import.meta.hot.send('custom:open-hot', { type: 'crud' })
 })
 </script>
 

diff --git a/web/src/views/backend/module/index.vue b/web/src/views/backend/module/index.vue
@@ -9,35 +9,30 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { state } from './store'
+import { onMounted, onActivated, onDeactivated, onUnmounted } from 'vue'
 import { loadData } from './index'
 import TableHeader from './components/tableHeader.vue'
 import BaAccount from './components/baAccount.vue'
 import Tabs from './components/tabs.vue'
 import GoodsInfo from './components/goodsInfo.vue'
 import CommonDialog from './components/commonDialog.vue'
-import { useI18n } from 'vue-i18n'
 
 defineOptions({
     name: 'moduleStore/moduleStore',
 })
 
-const { t } = useI18n()
-
 onMounted(() => {
     loadData()
-    if (import.meta.hot) {
-        import.meta.hot.on('vite:beforeFullReload', () => {
-            if (state.common.disableHmr) throw t('This is a deliberate error thrown to prevent a hot update of Vite')
-        })
-        import.meta.hot.on('vite:beforeUpdate', () => {
-            if (state.common.disableHmr) throw t('This is a deliberate error thrown to prevent a hot update of Vite')
-        })
-        import.meta.hot.on('vite:beforePrune', () => {
-            if (state.common.disableHmr) throw t('This is a deliberate error thrown to prevent a hot update of Vite')
-        })
-    }
+    if (import.meta.hot) import.meta.hot.send('custom:close-hot', { type: 'modules' })
+})
+onActivated(() => {
+    if (import.meta.hot) import.meta.hot.send('custom:close-hot', { type: 'modules' })
+})
+onDeactivated(() => {
+    if (import.meta.hot) import.meta.hot.send('custom:open-hot', { type: 'modules' })
+})
+onUnmounted(() => {
+    if (import.meta.hot) import.meta.hot.send('custom:open-hot', { type: 'modules' })
 })
 </script>
 

diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -2,7 +2,7 @@ import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 import { loadEnv } from 'vite'
 import type { UserConfig, ConfigEnv, ProxyOptions } from 'vite'
-import { isProd } from '/@/utils/vite'
+import { isProd, customHotUpdate } from '/@/utils/vite'
 import { svgBuilder } from '/@/components/icon/svg/index'
 
 const pathResolve = (dir: string): any => {
@@ -30,7 +30,7 @@ const viteConfig = ({ mode }: ConfigEnv): UserConfig => {
     }
 
     return {
-        plugins: [vue(), svgBuilder('./src/assets/icons/')],
+        plugins: [vue(), svgBuilder('./src/assets/icons/'), customHotUpdate()],
         root: process.cwd(),
         resolve: { alias },
         base: VITE_BASE_PATH,