refactor: 使用 vite-plugin-vue-app-loading 插件代替框架首屏loading

Author: hooray

package.json

@@ -93,6 +93,7 @@
     "vite-plugin-compression2": "^1.2.0",
     "vite-plugin-fake-server": "^2.1.1",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-app-loading": "^0.2.1",
     "vue-tsc": "^2.1.4"
   },
   "simple-git-hooks": {

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import { loadingFadeOut } from 'virtual:app-loading'
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
 import useMenuStore from '@/store/modules/menu'
@@ -89,4 +90,8 @@ router.beforeEach((to, from, next) => {
   }
 })
 
+router.isReady().then(() => {
+  loadingFadeOut()
+})
+
 export default router

src/router/index.ts

@@ -22,6 +22,7 @@
     "resolveJsonModule": true,
     "types": [
       "vite/client",
+      "vite-plugin-vue-app-loading/client",
       "element-plus/global"
     ],
     "allowImportingTsExtensions": true,

tsconfig.json

@@ -12,6 +12,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { vitePluginFakeServer } from 'vite-plugin-fake-server'
 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'
@@ -96,34 +97,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
       }
     })(),
 
-    {
-      name: 'vite-plugin-loading',
-      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',
-      },
-      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,
-          }
-        }
-      },
-    },
+    AppLoading('loading.html'),
 
     // https://github.com/unplugin/unplugin-turbo-console
     TurboConsole(),