refactor: Modularize Vite plugin management

build/vite/index.ts

@@ -1,45 +1,66 @@
-import path from 'node:path'
+import vue from '@vitejs/plugin-vue'
-import { viteVConsole } from 'vite-plugin-vconsole'
+import legacy from '@vitejs/plugin-legacy'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import { visualizer } from 'rollup-plugin-visualizer'
+import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import VueRouter from 'unplugin-vue-router/vite'
+import { VueRouterAutoImports } from 'unplugin-vue-router'
+import { VantResolver } from 'unplugin-vue-components/resolvers'
+import { unheadVueComposablesImports } from '@unhead/vue'
+import VueDevTools from 'vite-plugin-vue-devtools'
+import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
+import UnoCSS from 'unocss/vite'
+import { createViteVConsole } from './vconsole'
 
-// https://github.com/vadxq/vite-plugin-vconsole/issues/21
+export function createVitePlugins() {
+  return [
+    VueRouter({
+      routesFolder: 'src/views',
+      dts: 'src/typed-router.d.ts',
+    }),
 
-export function createViteVConsole(command: 'serve' | 'build') {
+    vue(),
-  return viteVConsole({
+    vueJsx(),
-    entry: [path.resolve('src/main.ts')],
+    visualizer(),
-    enabled: command === 'serve',
+    UnoCSS(),
-    config: {
+    mockDevServerPlugin(),
-      maxLogNumber: 1000,
-      theme: 'light',
-    },
-    dynamicConfig: {
-      theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
-    },
-    eventListener: `
-      const targetElement = document.querySelector('html'); // 择要监听的元素
-      const observerOptions = {
-        attributes: true, // 监听属性变化
-        attributeFilter: ['class'] // 只监听class属性变化
-      };
 
-      // 定义回调函数来处理观察到的变化
+    legacy({
-      function handleAttributeChange(mutationsList) {
+      targets: ['defaults', 'not IE 11'],
-        for(let mutation of mutationsList) {
+    }),
-          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-            if (window && window.vConsole) {
-              window.vConsole.dynamicChange.value = new Date().getTime();
-            }
-          }
-        }
-      }
 
-      // 创建观察者实例并传入回调函数
+    Components({
-      const observer = new MutationObserver(handleAttributeChange);
+      extensions: ['vue'],
+      resolvers: [VantResolver()],
+      include: [/\.vue$/, /\.vue\?vue/],
+      dts: 'src/components.d.ts',
+    }),
 
-      // 开始观察目标元素
+    AutoImport({
-      observer.observe(targetElement, observerOptions);
+      include: [
+        /\.[tj]sx?$/,
+        /\.vue$/,
+        /\.vue\?vue/,
+      ],
+      imports: [
+        'vue',
+        'vitest',
+        '@vueuse/core',
+        VueRouterAutoImports,
+        {
+          'vue-router/auto': ['useLink'],
+        },
+        unheadVueComposablesImports,
+      ],
+      dts: 'src/auto-imports.d.ts',
+      dirs: [
+        'src/composables',
+      ],
+    }),
 
-      // 当不再需要观察时，停止观察
+    createViteVConsole(),
-      // observer.disconnect();
+
-    `,
+    VueDevTools(),
-  })
+  ]
 }

build/vite/vconsole.ts

@@ -0,0 +1,44 @@
+import path from 'node:path'
+import { viteVConsole } from 'vite-plugin-vconsole'
+
+export function createViteVConsole() {
+  return viteVConsole({
+    entry: [path.resolve('src/main.ts')],
+    enabled: false,
+    config: {
+      maxLogNumber: 1000,
+      theme: 'light',
+    },
+    // https://github.com/vadxq/vite-plugin-vconsole/issues/21
+    dynamicConfig: {
+      theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
+    },
+    eventListener: `
+      const targetElement = document.querySelector('html'); // 择要监听的元素
+      const observerOptions = {
+        attributes: true, // 监听属性变化
+        attributeFilter: ['class'] // 只监听class属性变化
+      };
+
+      // 定义回调函数来处理观察到的变化
+      function handleAttributeChange(mutationsList) {
+        for(let mutation of mutationsList) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+            if (window && window.vConsole) {
+              window.vConsole.dynamicChange.value = new Date().getTime();
+            }
+          }
+        }
+      }
+
+      // 创建观察者实例并传入回调函数
+      const observer = new MutationObserver(handleAttributeChange);
+
+      // 开始观察目标元素
+      observer.observe(targetElement, observerOptions);
+
+      // 当不再需要观察时，停止观察
+      // observer.disconnect();
+    `,
+  })
+}

vite.config.ts

@@ -2,84 +2,37 @@ import path from 'node:path'
 import process from 'node:process'
 import { loadEnv } from 'vite'
 import type { ConfigEnv, UserConfig } from 'vite'
-
-import { visualizer } from 'rollup-plugin-visualizer'
-import Components from 'unplugin-vue-components/vite'
-import AutoImport from 'unplugin-auto-import/vite'
-import VueRouter from 'unplugin-vue-router/vite'
-import { VueRouterAutoImports } from 'unplugin-vue-router'
-import { VantResolver } from 'unplugin-vue-components/resolvers'
-import { unheadVueComposablesImports } from '@unhead/vue'
-
-import vue from '@vitejs/plugin-vue'
-import legacy from '@vitejs/plugin-legacy'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-
 import viewport from 'postcss-mobile-forever'
 import autoprefixer from 'autoprefixer'
+import { createVitePlugins } from './build/vite'
 
-import VueDevTools from 'vite-plugin-vue-devtools'
+export default ({ mode }: ConfigEnv): UserConfig => {
-import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
-
-import UnoCSS from 'unocss/vite'
-import { createViteVConsole } from './build/vite'
-
-export default ({ command, mode }: ConfigEnv): UserConfig => {
   const root = process.cwd()
   const env = loadEnv(mode, root)
 
   return {
     base: env.VITE_APP_PUBLIC_PATH,
+    plugins: createVitePlugins(),
 
-    plugins: [
+    server: {
-      VueRouter({
+      host: true,
-        routesFolder: 'src/views',
+      port: 3000,
-        dts: 'src/typed-router.d.ts',
+      proxy: {
-      }),
+        '/api': {
+          target: '',
+          ws: false,
+          changeOrigin: true,
+        },
+      },
+    },
 
-      vue(),
+    resolve: {
-      vueJsx(),
+      alias: {
-      visualizer(),
+        '~@': path.join(__dirname, './src'),
-      UnoCSS(),
+        '@': path.join(__dirname, './src'),
-      mockDevServerPlugin(),
+        '~': path.join(__dirname, './src/assets'),
-
+      },
-      legacy({
+    },
-        targets: ['defaults', 'not IE 11'],
-      }),
-
-      Components({
-        extensions: ['vue'],
-        resolvers: [VantResolver()],
-        include: [/\.vue$/, /\.vue\?vue/],
-        dts: 'src/components.d.ts',
-      }),
-
-      AutoImport({
-        include: [
-          /\.[tj]sx?$/,
-          /\.vue$/,
-          /\.vue\?vue/,
-        ],
-        imports: [
-          'vue',
-          'vitest',
-          '@vueuse/core',
-          VueRouterAutoImports,
-          {
-            'vue-router/auto': ['useLink'],
-          },
-          unheadVueComposablesImports,
-        ],
-        dts: 'src/auto-imports.d.ts',
-        dirs: [
-          'src/composables',
-        ],
-      }),
-
-      createViteVConsole(command),
-
-      VueDevTools(),
-    ],
 
     css: {
       postcss: {
@@ -98,25 +51,5 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       cssCodeSplit: false,
       chunkSizeWarningLimit: 2048,
     },
-
-    resolve: {
-      alias: {
-        '~@': path.join(__dirname, './src'),
-        '@': path.join(__dirname, './src'),
-        '~': path.join(__dirname, './src/assets'),
-      },
-    },
-
-    server: {
-      host: true,
-      port: 3000,
-      proxy: {
-        '/api': {
-          target: '',
-          ws: false,
-          changeOrigin: true,
-        },
-      },
-    },
   }
 }