🎨添加静态打包

web/build/plugin/html.js

@@ -0,0 +1,15 @@
+import { createHtmlPlugin } from 'vite-plugin-html'
+
+export function configHtmlPlugin(viteEnv, isBuild) {
+  const { VITE_TITLE } = viteEnv
+
+  const htmlPlugin = createHtmlPlugin({
+    minify: isBuild,
+    inject: {
+      data: {
+        title: VITE_TITLE,
+      },
+    },
+  })
+  return htmlPlugin
+}

web/build/plugin/index.js

@@ -0,0 +1,42 @@
+import vue from '@vitejs/plugin-vue'
+
+/**
+ * * unocss插件，原子css
+ * https://github.com/antfu/unocss
+ */
+import Unocss from 'unocss/vite'
+
+// rollup打包分析插件
+import visualizer from 'rollup-plugin-visualizer'
+// 压缩
+import viteCompression from 'vite-plugin-compression'
+// vite-vuedevtool
+import VueDevTools from 'vite-plugin-vue-devtools'
+
+import { configHtmlPlugin } from './html'
+import { configMockPlugin } from './mock'
+import unplugin from './unplugin'
+
+export function createVitePlugins(viteEnv, isBuild) {
+  const plugins = [VueDevTools(), vue(), ...unplugin, configHtmlPlugin(viteEnv, isBuild), Unocss()]
+
+  if (viteEnv?.VITE_USE_MOCK) {
+    plugins.push(configMockPlugin(isBuild))
+  }
+
+  if (viteEnv.VITE_USE_COMPRESS) {
+    plugins.push(viteCompression({ algorithm: viteEnv.VITE_COMPRESS_TYPE || 'gzip' }))
+  }
+
+  if (isBuild) {
+    plugins.push(
+      visualizer({
+        open: true,
+        gzipSize: true,
+        brotliSize: true,
+      })
+    )
+  }
+
+  return plugins
+}

web/build/plugin/mock.js

@@ -0,0 +1,13 @@
+import { viteMockServe } from 'vite-plugin-mock'
+
+export function configMockPlugin(isBuild) {
+  return viteMockServe({
+    mockPath: 'mock/api',
+    localEnabled: !isBuild,
+    prodEnabled: isBuild,
+    injectCode: `
+      import { setupProdMockServer } from '../mock';
+      setupProdMockServer();
+    `,
+  })
+}

web/build/plugin/unplugin.js

@@ -0,0 +1,46 @@
+import { resolve } from 'path'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import IconsResolver from 'unplugin-icons/resolver'
+
+/**
+ * * unplugin-icons插件，自动引入iconify图标
+ * usage: https://github.com/antfu/unplugin-icons
+ * 图标库: https://icones.js.org/
+ */
+import Icons from 'unplugin-icons/vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+
+import { getSrcPath } from '../utils'
+
+const customIconPath = resolve(getSrcPath(), 'assets/svg')
+
+export default [
+  AutoImport({
+    imports: ['vue', 'vue-router'],
+    dts: false,
+  }),
+  Icons({
+    compiler: 'vue3',
+    customCollections: {
+      custom: FileSystemIconLoader(customIconPath),
+    },
+    scale: 1,
+    defaultClass: 'inline-block',
+  }),
+  Components({
+    resolvers: [
+      NaiveUiResolver(),
+      IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' }),
+    ],
+    dts: false,
+  }),
+  createSvgIconsPlugin({
+    iconDirs: [customIconPath],
+    symbolId: 'icon-custom-[dir]-[name]',
+    inject: 'body-last',
+    customDomId: '__CUSTOM_SVG_ICON__',
+  }),
+]