refactor: vite配置引入自动导入和优化配置

vite.config.ts

@@ -1,22 +1,28 @@
-import { UserConfig, ConfigEnv, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
+
+import { UserConfig, ConfigEnv, loadEnv, defineConfig } from 'vite';
+
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+
+import Icons from 'unplugin-icons/vite';
+import IconsResolver from 'unplugin-icons/resolver';
+
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+
 import path from 'path';
+const pathSrc = path.resolve(__dirname, 'src');
 
-export default ({ mode }: ConfigEnv): UserConfig => {
+export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
-  // 获取 .env 环境配置文件
   const env = loadEnv(mode, process.cwd());
-
   return {
-    plugins: [
+    resolve: {
-      vue(),
+      // 别名配置 @替代src
-      createSvgIconsPlugin({
+      alias: {
-        // 指定需要缓存的图标文件夹
+        '@': pathSrc
-        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+      }
-        // 指定symbolId格式
+    },
-        symbolId: 'icon-[dir]-[name]'
-      })
-    ],
     // 本地反向代理解决浏览器跨域限制
     server: {
       host: '0.0.0.0',
@@ -34,11 +40,47 @@ export default ({ mode }: ConfigEnv): UserConfig => {
         }
       }
     },
-    resolve: {
+    plugins: [
-      // Vite路径别名配置
+      vue(),
-      alias: {
+      AutoImport({
-        '@': path.resolve('./src')
+        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
-      }
+        imports: ['vue', '@vueuse/core'],
-    }
+        resolvers: [
+          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
+          ElementPlusResolver(),
+          // 自动导入图标组件
+          IconsResolver({
+            prefix: 'Icon'
+          })
+        ],
+        vueTemplate: true,
+        dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts')
+      }),
+
+      Components({
+        resolvers: [
+          // 自动注册图标组件
+          IconsResolver({
+            // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
+            enabledCollections: ['ep']
+          }),
+          // 自动导入 Element Plus 组件
+          ElementPlusResolver()
+        ],
+        dts: path.resolve(pathSrc, 'types', 'components.d.ts')
+      }),
+
+      Icons({
+        // 自动安装图标库
+        autoInstall: true
+      }),
+
+      createSvgIconsPlugin({
+        // 指定需要缓存的图标文件夹
+        iconDirs: [path.resolve(pathSrc, 'assets/icons')],
+        // 指定symbolId格式
+        symbolId: 'icon-[dir]-[name]'
+      })
+    ]
   };
-};
+});