修复transition组件导致的白屏(重现: 热更新transition下的组件script代码切换tab即可)

web/src/layout/components/Main/index.vue

@@ -1,14 +1,21 @@
 <template>
   <RouterView>
     <template #default="{ Component, route }">
-      {{ retryKeepAlive(route) }}
+      <template v-if="mode === 'production'">
         <transition :name="getTransitionName" mode="out-in" appear>
-        <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
+          <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
             <component :is="Component" :key="route.fullPath" />
           </keep-alive>
           <component v-else :is="Component" :key="route.fullPath" />
         </transition>
       </template>
+      <template v-else>
+        <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+        <component v-else :is="Component" :key="route.fullPath" />
+      </template>
+    </template>
   </RouterView>
 </template>
 
@@ -72,11 +79,12 @@
           }
         }
       }
-
+      const mode = import.meta.env.MODE;
       return {
         keepAliveComponents,
         getTransitionName,
         retryKeepAlive,
+        mode,
       };
     },
   });