From c6d5755808262452d5a97a0624754b8519769085 Mon Sep 17 00:00:00 2001
From: haoxr <1490493387@qq.com>
Date: Fri, 13 Jan 2023 01:04:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20vite=E9=85=8D=E7=BD=AE=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=E8=87=AA=E5=8A=A8=E5=AF=BC=E5=85=A5=E5=92=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite.config.ts | 82 ++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 62 insertions(+), 20 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index 12af62a..c87ca85 100644
--- a/vite.config.ts
+++ b/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 => {
-  // 获取 .env 环境配置文件
+export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
   const env = loadEnv(mode, process.cwd());
-
   return {
-    plugins: [
-      vue(),
-      createSvgIconsPlugin({
-        // 指定需要缓存的图标文件夹
-        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
-        // 指定symbolId格式
-        symbolId: 'icon-[dir]-[name]'
-      })
-    ],
+    resolve: {
+      // 别名配置 @替代src
+      alias: {
+        '@': pathSrc
+      }
+    },
     // 本地反向代理解决浏览器跨域限制
     server: {
       host: '0.0.0.0',
@@ -34,11 +40,47 @@ export default ({ mode }: ConfigEnv): UserConfig => {
         }
       }
     },
-    resolve: {
-      // Vite路径别名配置
-      alias: {
-        '@': path.resolve('./src')
-      }
-    }
+    plugins: [
+      vue(),
+      AutoImport({
+        // 自动导入 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]'
+      })
+    ]
   };
-};
+});