diff --git a/package.json b/package.json
index a0ac753e..1fd17ce7 100755
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "vite-plugin-fake-server": "^2.1.1",
     "vite-plugin-pages": "^0.32.3",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-app-loading": "^0.2.1",
     "vite-plugin-vue-devtools": "^7.3.9",
     "vite-plugin-vue-meta-layouts": "^0.4.3",
     "vue-tsc": "^2.1.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25322e32..8181397b 100755
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -240,6 +240,9 @@ importers:
       vite-plugin-svg-icons:
         specifier: ^2.0.1
         version: 2.0.1(vite@5.4.2(@types/node@22.5.1)(sass@1.77.8)(terser@5.31.6))
+      vite-plugin-vue-app-loading:
+        specifier: ^0.2.1
+        version: 0.2.1
       vite-plugin-vue-devtools:
         specifier: ^7.3.9
         version: 7.3.9(rollup@4.21.2)(vite@5.4.2(@types/node@22.5.1)(sass@1.77.8)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4))
@@ -5834,6 +5837,9 @@ packages:
     peerDependencies:
       vite: '>=2.0.0'
 
+  vite-plugin-vue-app-loading@0.2.1:
+    resolution: {integrity: sha512-/DE4bYFvs8akpm1CDFzGv43YVAunX1fEe718DAambRrUqBCMw+KJjfjfDzX13/lHA+zZEKrJ4053VgK57R9aVw==}
+
   vite-plugin-vue-devtools@7.3.9:
     resolution: {integrity: sha512-ybDV2kepW0NpusvtfbRKHs0pvyrReNcFtL572gyZ6Alox6u5uebYefd2eAG/7mJSU3NPI5UxUH1e/Mof5exdlw==}
     engines: {node: '>=v14.21.3'}
@@ -12177,6 +12183,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vite-plugin-vue-app-loading@0.2.1: {}
+
   vite-plugin-vue-devtools@7.3.9(rollup@4.21.2)(vite@5.4.2(@types/node@22.5.1)(sass@1.77.8)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4)):
     dependencies:
       '@vue/devtools-core': 7.3.9(vite@5.4.2(@types/node@22.5.1)(sass@1.77.8)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4))
diff --git a/src/types/shims.d.ts b/src/types/shims.d.ts
index 41c5a0ac..fdabb3e4 100755
--- a/src/types/shims.d.ts
+++ b/src/types/shims.d.ts
@@ -3,13 +3,6 @@ declare interface Window {
   mozDevicePixelRatio: any
 }
 
-declare module 'virtual:app-loading' {
-  const loadingFadeOut: () => void
-  export {
-    loadingFadeOut,
-  }
-}
-
 declare const __SYSTEM_INFO__: {
   pkg: {
     version: Recordable<string>
diff --git a/tsconfig.json b/tsconfig.json
index c63af055..a48e29a8 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,6 +24,7 @@
       "vite/client",
       "vite-plugin-pages/client",
       "vite-plugin-vue-meta-layouts/client",
+      "vite-plugin-vue-app-loading/client",
       "element-plus/global"
     ],
     "allowImportingTsExtensions": true,
diff --git a/vite/plugins.ts b/vite/plugins.ts
index 06230254..8167431c 100644
--- a/vite/plugins.ts
+++ b/vite/plugins.ts
@@ -16,6 +16,7 @@ import Layouts from 'vite-plugin-vue-meta-layouts'
 import Pages from 'vite-plugin-pages'
 import { compression } from 'vite-plugin-compression2'
 import archiver from 'archiver'
+import AppLoading from 'vite-plugin-vue-app-loading'
 import TurboConsole from 'unplugin-turbo-console/vite'
 import banner from 'vite-plugin-banner'
 import boxen from 'boxen'
@@ -124,44 +125,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
       }
     })(),
 
-    (function () {
-      const virtualModuleId = 'virtual:app-loading'
-      const resolvedVirtualModuleId = `\0${virtualModuleId}`
-      return {
-        name: 'vite-plugin-loading',
-        resolveId(id) {
-          if (id === virtualModuleId) {
-            return resolvedVirtualModuleId
-          }
-        },
-        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',
-        },
-      }
-    })(),
+    AppLoading('loading.html'),
 
     // https://github.com/unplugin/unplugin-turbo-console
     TurboConsole(),