refactor: 环境变量 VITE_APP_DEBUG_TOOL 改成用 vite 插件的方式注入代码中

src/App.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import eruda from 'eruda'
-import VConsole from 'vconsole'
 import DisableDevtool from 'disable-devtool'
 import hotkeys from 'hotkeys-js'
 import eventBus from './utils/eventBus'
@@ -68,8 +66,6 @@ onMounted(() => {
   })
 })
 
-import.meta.env.VITE_APP_DEBUG_TOOL === 'eruda' && eruda.init()
-import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
 import.meta.env.VITE_APP_DISABLE_DEVTOOL === 'true' && DisableDevtool()
 </script>
 

vite/plugins/debug-tool.ts

@@ -0,0 +1,28 @@
+import type { Plugin } from 'vite'
+
+export default function createDebugTool(env): Plugin {
+  const { VITE_APP_DEBUG_TOOL } = env
+  return {
+    name: 'debug-plugin',
+    transform: (code, id) => {
+      if (/src\/main.ts$/.test(id)) {
+        if (VITE_APP_DEBUG_TOOL === 'eruda') {
+          code = code.concat(`
+            import eruda from 'eruda'
+            eruda.init()
+          `)
+        }
+        else if (VITE_APP_DEBUG_TOOL === 'vconsole') {
+          code = code.concat(`
+            import VConsole from 'vconsole'
+            new VConsole()
+          `)
+        }
+        return {
+          code,
+          map: null,
+        }
+      }
+    },
+  }
+}

vite/plugins/index.ts

@@ -16,6 +16,7 @@ import createCompression from './compression'
 import createArchiver from './archiver'
 import createConsole from './console'
 import createBanner from './banner'
+import createDebugTool from './debug-tool'
 
 export default function createVitePlugins(viteEnv, isBuild = false) {
   const vitePlugins: (PluginOption | PluginOption[])[] = [
@@ -42,5 +43,6 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
   vitePlugins.push(createArchiver(viteEnv))
   vitePlugins.push(createConsole())
   vitePlugins.push(createBanner())
+  vitePlugins.push(createDebugTool(viteEnv))
   return vitePlugins
 }