refactor: 修改全局loading消失时机

src/layouts/index.vue

@@ -111,7 +111,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
           <Topbar />
           <div class="main">
             <RouterView v-slot="{ Component, route }">
-              <Transition name="slide-right" mode="out-in" appear>
+              <Transition name="slide-right" mode="out-in">
                 <KeepAlive :include="keepAliveStore.list">
                   <component :is="Component" v-show="!isLink" :key="route.fullPath" />
                 </KeepAlive>

src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import { loadingFadeOut } from 'virtual:app-loading'
 import setupGuards from './guards'
 
 // 路由相关数据
@@ -13,4 +14,8 @@ const router = createRouter({
 
 setupGuards(router)
 
+router.isReady().then(() => {
+  loadingFadeOut()
+})
+
 export default router

src/types/shims.d.ts

@@ -3,6 +3,13 @@ declare interface Window {
   mozDevicePixelRatio: any
 }
 
+declare module 'virtual:app-loading' {
+  const loadingFadeOut: () => void
+  export {
+    loadingFadeOut,
+  }
+}
+
 declare const __SYSTEM_INFO__: {
   pkg: {
     version: Recordable<string>

vite/plugins.ts

@@ -124,34 +124,44 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
       }
     })(),
 
-    {
+    (function () {
-      name: 'vite-plugin-loading',
+      const virtualModuleId = 'virtual:app-loading'
-      enforce: 'pre',
+      const resolvedVirtualModuleId = `\0${virtualModuleId}`
-      transformIndexHtml: {
+      return {
-        handler: async html => html.replace(/<\/body>/, `${
+        name: 'vite-plugin-loading',
-          `<div data-app-loading>${await fs.readFileSync(path.resolve(process.cwd(), 'loading.html'), 'utf8')}</div>`
+        resolveId(id) {
-        }</body>`),
+          if (id === virtualModuleId) {
-        order: 'pre',
+            return resolvedVirtualModuleId
-      },
-      transform: (code, id) => {
-        if (/src\/main.ts$/.test(id)) {
-          code = code.concat(`
-            const loadingEl = document.querySelector('[data-app-loading]')
-            if (loadingEl) {
-              loadingEl.style['pointer-events'] = 'none'
-              loadingEl.style.visibility = 'hidden'
-              loadingEl.style.opacity = 0
-              loadingEl.style.transition = 'all 0.5s ease-out'
-              loadingEl.addEventListener('transitionend', () => loadingEl.remove(), { once: true })
-            }
-          `)
-          return {
-            code,
-            map: null,
           }
-        }
+        },
-      },
+        load(id) {
-    },
+          if (id === resolvedVirtualModuleId) {
+            return {
+              code: `
+                export function loadingFadeOut() {
+                  const loadingEl = document.querySelector('[data-app-loading]')
+                  if (loadingEl) {
+                    loadingEl.style['pointer-events'] = 'none'
+                    loadingEl.style.visibility = 'hidden'
+                    loadingEl.style.opacity = 0
+                    loadingEl.style.transition = 'all 0.5s ease-out'
+                    loadingEl.addEventListener('transitionend', () => loadingEl.remove(), { once: true })
+                  }
+                }
+              `,
+              map: null,
+            }
+          }
+        },
+        enforce: 'pre',
+        transformIndexHtml: {
+          handler: async html => html.replace(/<\/body>/, `${
+            `<div data-app-loading>${await fs.readFileSync(path.resolve(process.cwd(), 'loading.html'), 'utf8')}</div>`
+          }</body>`),
+          order: 'pre',
+        },
+      }
+    })(),
 
     // https://github.com/unplugin/unplugin-turbo-console
     TurboConsole(),