优化结构

web/vite.config.js

@@ -4,10 +4,57 @@ import * as path from 'path'
 import { loadEnv } from 'vite'
 import vuePlugin from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
-import { svgBuilder } from 'vite-auto-import-svg'
-import vueRootValidator from 'vite-check-multiple-dom'
 import UnoCSS from '@unocss/vite'
 
+const svgSpritePlugin = (roots) => ({
+  name: 'kra-svg-sprite',
+  transformIndexHtml(html) {
+    const symbols = []
+    const visit = (directory, modulePrefix = '') => {
+      if (!fs.existsSync(directory)) return
+      const entries = fs.readdirSync(directory, { withFileTypes: true })
+        .sort((a, b) => a.name.localeCompare(b.name))
+
+      for (const entry of entries) {
+        const filename = path.join(directory, entry.name)
+        if (entry.isDirectory()) {
+          visit(filename, modulePrefix || entry.name + '-')
+          continue
+        }
+        if (!entry.name.endsWith('.svg')) continue
+
+        const source = fs.readFileSync(filename, 'utf8')
+        const openingTag = source.match(/<svg\b([^>]*)>/i)
+        if (!openingTag) continue
+
+        const attrs = openingTag[1]
+          .replace(/\s(?:width|height)=(['"]).*?\1/gi, '')
+          .trim()
+        const body = source
+          .slice(openingTag[0].length)
+          .replace(/<\/svg>\s*$/i, '')
+        const iconName = entry.name.replace(/\.svg$/i, '')
+        symbols.push(`<symbol id="${modulePrefix}${iconName}"${attrs ? ` ${attrs}` : ''}>${body}</symbol>`)
+      }
+    }
+
+    for (const root of roots) {
+      const directory = path.resolve(root)
+      const moduleRoot = path.basename(path.dirname(directory)) === 'src' && path.basename(directory) === 'modules'
+      if (!moduleRoot) {
+        visit(directory)
+        continue
+      }
+      for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+        if (entry.isDirectory()) visit(path.join(directory, entry.name), entry.name + '-')
+      }
+    }
+
+    const sprite = `<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0">${symbols.join('')}</svg>`
+    return html.replace('<body>', `<body>\n${sprite}`)
+  }
+})
+
 const pathMapPlugin = () => ({
   name: 'kra-vue-path-map',
   buildStart() {
@@ -97,10 +144,9 @@ export default ({ mode }) => {
       env.VITE_POSITION === 'open' &&
       vueDevTools({ launchEditor: env.VITE_EDITOR }),
       vuePlugin(),
-      svgBuilder(['./src/modules/', './src/assets/icons/'], base, outDir, 'assets', mode),
+      svgSpritePlugin(['./src/modules/', './src/assets/icons/']),
       pathMapPlugin(),
-      UnoCSS(),
-      vueRootValidator()
+      UnoCSS()
     ]
   }
   return config