添加svg配置

build/vite/plugin/index.js

@@ -0,0 +1,16 @@
+import vue from '@vitejs/plugin-vue'
+
+import { configStylePlugin } from './style'
+import { configThemePlugin } from './theme';
+import { configSvgPlugin } from './svg';
+
+export function createVitePlugins() {
+  const vitePlugins = [
+    vue()
+  ]
+  vitePlugins.push(configStylePlugin())
+  vitePlugins.push(configThemePlugin())
+  vitePlugins.push(configSvgPlugin())
+
+  return vitePlugins
+}

build/vite/plugin/style.js

@@ -0,0 +1,25 @@
+import styleImport from 'vite-plugin-style-import'
+
+export function configStylePlugin(){
+  const options = {
+    libs: [{
+      libraryName: 'element-plus',
+      esModule: true,
+      ensureStyleFile: true,
+      resolveStyle: (name) => {
+        name = name.slice(3)
+        // 使用element scss样式
+        return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        // 使用element css样式
+        // return `element-plus/lib/theme-chalk/${name}.css`;
+      },
+      resolveComponent: (name) => {
+        return `element-plus/lib/${name}`;
+      },
+    }]
+  }
+  const plugin = [
+    styleImport(options)
+  ]
+  return plugin
+}

build/vite/plugin/svg.js

@@ -0,0 +1,14 @@
+import viteSvgIcons from 'vite-plugin-svg-icons';
+import path from 'path';
+
+export function configSvgPlugin() {
+  const svgPlugin = viteSvgIcons({
+    // 指定需要缓存的图标文件夹
+    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+    // 压缩配置
+    // svgoOptions: false,
+    // 指定symbolId格式
+    symbolId: 'icon-[dir]-[name]',
+  })
+  return svgPlugin
+}

build/vite/plugin/theme.js

@@ -0,0 +1,52 @@
+import path from 'path'
+import themePreprocessorPlugin, {
+  getModulesScopeGenerater,
+} from "@zougt/vite-plugin-theme-preprocessor";
+
+export function configThemePlugin() {
+  let options = {
+    scss: {
+      multipleScopeVars: [
+        {
+          scopeName: "variables-theme-day",
+          path: path.resolve("src/styles/variables-day.scss"),
+        },
+        {
+          scopeName: "variables-theme-dark",
+          path: path.resolve("src/styles/variables-dark.scss"),
+        },
+      ],
+      // 默认取 multipleScopeVars[0].scopeName
+      defaultScopeName: "",
+      // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
+      extract: false,
+      // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
+      outputDir: "",
+      // 会选取defaultScopeName对应的主题css文件在html添加link
+      // themeLinkTagId: "theme-link-tag",
+      // // "head"||"head-prepend" || "body" ||"body-prepend"
+      // themeLinkTagInjectTo: "head",
+      // 是否对抽取的css文件内对应scopeName的权重类名移除
+      removeCssScopeName: false,
+      // 可以自定义css文件名称的函数
+      customThemeCssFileName: (scopeName) => scopeName,
+    },
+    // less: {
+    //   multipleScopeVars: [
+    //     {
+    //       scopeName: "theme-default",
+    //       path: path.resolve("src/theme/default-vars.less"),
+    //     },
+    //     {
+    //       scopeName: "theme-mauve",
+    //       path: path.resolve("src/theme/mauve-vars.less"),
+    //     },
+    //   ],
+    // },
+  }
+
+  const plugin = [
+    themePreprocessorPlugin(options),
+  ]
+  return plugin
+}