feat: 项目初始化,未病局

2025-09-20 10:36:39 +08:00
commit 39f70340a0
421 changed files with 48180 additions and 0 deletions
@@ -0,0 +1,163 @@
+import { resolve } from "path";
+import { PluginOption } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+import { visualizer } from "rollup-plugin-visualizer";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import { createHtmlPlugin } from "vite-plugin-html";
+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";
+import UnoCSS from "unocss/vite";
+import AutoImport from "unplugin-auto-import/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import Components from "unplugin-vue-components/vite";
+import Icons from "unplugin-icons/vite";
+import IconsResolver from "unplugin-icons/resolver";
+import NextDevTools from "vite-plugin-vue-devtools";
+import { codeInspectorPlugin } from "code-inspector-plugin";
+/**
+ * 创建 vite 插件
+ * @param viteEnv
+ */
+export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => {
+  const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_DEVTOOLS, VITE_PWA, VITE_CODEINSPECTOR } = viteEnv;
+
+  return [
+    vue(),
+    // devTools
+    VITE_DEVTOOLS && NextDevTools({ launchEditor: "code" }),
+    // vue 可以使用 jsx/tsx 语法
+    vueJsx(),
+    // esLint 报错信息显示在浏览器界面上
+    eslintPlugin(),
+    // name 可以写在 script 标签上
+    vueSetupExtend({}),
+    // 创建打包压缩配置
+    createCompression(viteEnv),
+    // 注入变量到 html 文件
+    createHtmlPlugin({
+      minify: true,
+      inject: {
+        data: { title: VITE_GLOB_APP_TITLE }
+      }
+    }),
+    // 使用 svg 图标
+    createSvgIconsPlugin({
+      iconDirs: [resolve(process.cwd(), "src/assets/svg")],
+      symbolId: "local-[dir]-[name]"
+    }),
+    // vitePWA
+    VITE_PWA && createVitePwa(viteEnv),
+    // 是否生成包预览，分析依赖包大小做优化处理
+    VITE_REPORT && (visualizer({ filename: "stats.html", gzipSize: true, brotliSize: true }) as PluginOption),
+    // 自动 IDE 并将光标定位到 DOM 对应的源代码位置。see: https://inspector.fe-dev.cn/guide/start.html
+    VITE_CODEINSPECTOR &&
+      codeInspectorPlugin({
+        bundler: "vite"
+      }),
+    // 自动导入组件
+    AutoImport({
+      imports: ["vue", "vue-router"],
+      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
+      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
+      resolvers: [
+        ElementPlusResolver(),
+
+        // Auto import icon components
+        // 自动导入图标组件
+        IconsResolver({
+          prefix: "Icon"
+        })
+      ],
+      dts: "src/auto-import.d.ts" // 路径下自动生成文件夹存放全局指令
+    }),
+    Components({
+      dirs: ["src/components"], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import
+      resolvers: [
+        // Auto register icon components
+        // 自动注册图标组件
+        IconsResolver({
+          enabledCollections: ["ep"] // element-plus 图标库
+        }),
+        // Auto register Element Plus components
+        // 自动导入 Element Plus 组件
+        ElementPlusResolver()
+      ]
+    }),
+    Icons({
+      compiler: "vue3",
+      autoInstall: true
+    }),
+
+    UnoCSS() // UnoCSS
+  ];
+};
+
+/**
+ * @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",
+    workbox: {
+      // 添加此项配置，增加需要缓存的最大文件大小
+      maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
+    },
+    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"
+        }
+      ]
+    }
+  });
+};