2025-03-26

build/plugins.ts

@@ -0,0 +1,144 @@
+import { resolve } from "path";
+import { PluginOption } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+import { visualizer } from "rollup-plugin-visualizer";
+import { createHtmlPlugin } from "vite-plugin-html";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import eslintPlugin from "vite-plugin-eslint";
+import viteCompression from "vite-plugin-compression";
+import vueSetupExtend from "unplugin-vue-setup-extend-plus/vite";
+// 自动导入vue中hook reactive ref等
+import AutoImport from "unplugin-auto-import/vite";
+// 自动导入ui-组件 比如说ant-design-vue  element-plus等
+import Components from "unplugin-vue-components/vite";
+// element
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+// 导入图标
+import Icons from "unplugin-icons/vite";
+import IconsResolver from "unplugin-icons/resolver";
+
+/**
+ * 创建 vite 插件
+ * @param viteEnv
+ */
+export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => {
+    const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_PWA } = viteEnv;
+    return [
+        vue(),
+        // vue 可以使用 jsx/tsx 语法
+        vueJsx(),
+        // esLint 报错信息显示在浏览器界面上
+        eslintPlugin(),
+        // name 可以写在 script 标签上
+        vueSetupExtend({}),
+        // 创建打包压缩配置
+        createCompression(viteEnv),
+        // 注入变量到 html 文件
+        createHtmlPlugin({
+            inject: {
+                data: { title: VITE_GLOB_APP_TITLE }
+            }
+        }),
+        // 使用 svg 图标
+        createSvgIconsPlugin({
+            iconDirs: [resolve(process.cwd(), "src/assets/icons")],
+            symbolId: "icon-[dir]-[name]"
+        }),
+        // element按需导入
+        AutoImport({
+            // 安装两行后你会发现在组件中不用再导入ref，reactive等
+            imports: ["vue", "vue-router"],
+            dts: "src/auto-import.d.ts",
+            // element
+            resolvers: [
+                ElementPlusResolver({ importStyle: "sass" }),
+                IconsResolver({
+                    prefix: "Icon"
+                })
+            ]
+        }),
+        Components({
+            // element
+            resolvers: [
+                ElementPlusResolver({ importStyle: "sass" }),
+                IconsResolver({
+                    enabledCollections: ["ep"]
+                })
+            ],
+            // 默认存放位置
+            dts: "src/components.d.ts"
+        }),
+        Icons({
+            autoInstall: true
+        }),
+        // vitePWA
+        VITE_PWA && createVitePwa(viteEnv),
+        // 是否生成包预览，分析依赖包大小做优化处理
+        VITE_REPORT && (visualizer({ filename: "stats.html", gzipSize: true, brotliSize: true }) as PluginOption)
+    ];
+};
+
+/**
+ * @description 根据 compress 配置，生成不同的压缩规则
+ * @param viteEnv
+ */
+const createCompression = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
+    const { VITE_BUILD_COMPRESS = "none", VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
+    const compressList = VITE_BUILD_COMPRESS.split(",");
+    const plugins: PluginOption[] = [];
+    if (compressList.includes("gzip")) {
+        plugins.push(
+            viteCompression({
+                ext: ".gz",
+                algorithm: "gzip",
+                deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+            })
+        );
+    }
+    if (compressList.includes("brotli")) {
+        plugins.push(
+            viteCompression({
+                ext: ".br",
+                algorithm: "brotliCompress",
+                deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+            })
+        );
+    }
+    return plugins;
+};
+
+/**
+ * @description VitePwa
+ * @param viteEnv
+ */
+const createVitePwa = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
+    const { VITE_GLOB_APP_TITLE } = viteEnv;
+    return VitePWA({
+        registerType: "autoUpdate",
+        manifest: {
+            name: VITE_GLOB_APP_TITLE,
+            short_name: VITE_GLOB_APP_TITLE,
+            theme_color: "#ffffff",
+            icons: [
+                {
+                    src: "/logo.png",
+                    sizes: "192x192",
+                    type: "image/png"
+                },
+                {
+                    src: "/logo.png",
+                    sizes: "512x512",
+                    type: "image/png"
+                },
+                {
+                    src: "/logo.png",
+                    sizes: "512x512",
+                    type: "image/png",
+                    purpose: "any maskable"
+                }
+            ]
+        }
+    });
+};