fix: svg can not loaded

buqiyuan · Dec 13, 2021 · 6aec46a · 6aec46a
1 parent 3d32e82
commit 6aec46a
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 29 deletions.
diff --git a/src/components/svg-icon/svg-icon.vue b/src/components/svg-icon/svg-icon.vue
@@ -1,30 +1,33 @@
 <template>
-  <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName" />
+  <svg class="svg-icon" aria-hidden="true">
+    <use :href="symbolId" :fill="color" />
   </svg>
 </template>
-<script lang="ts" setup>
-  import { computed } from 'vue';
 
-  const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
-    requireContext.keys().forEach(requireContext);
-  try {
-    importAll(require.context('@/assets/icons', true, /\.svg$/));
-  } catch (error) {
-    console.log(error);
-  }
-
-  interface Props {
-    iconClass: string;
-    className?: string;
-  }
+<script>
+  import { defineComponent, computed } from 'vue';
 
-  const props = withDefaults(defineProps<Props>(), {
-    className: '',
+  export default defineComponent({
+    name: 'SvgIcon',
+    props: {
+      prefix: {
+        type: String,
+        default: 'svg-icon',
+      },
+      name: {
+        type: String,
+        required: true,
+      },
+      color: {
+        type: String,
+        default: '#333',
+      },
+    },
+    setup(props) {
+      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+      return { symbolId };
+    },
   });
-
-  const iconName = computed(() => `#icon-${props.iconClass}`);
-  const svgClass = computed(() => 'svg-icon');
 </script>
 
 <style lang="less" scoped>

diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,6 @@
 import 'virtual:windi.css';
 import 'virtual:windi-devtools';
+import 'virtual:svg-icons-register';
 
 import { createApp } from 'vue';
 import App from './App.vue';

diff --git a/src/utils/common.ts b/src/utils/common.ts
@@ -119,16 +119,25 @@ export const generateTree = (items, id = 0, link = 'parent') => {
 // const decryption = (ciphertext: string) =>
 //   isBase64(ciphertext) ? window.decodeURIComponent(window.atob(ciphertext)) : ciphertext;
 
+const viewsModules = import.meta.glob('../views/**/*.vue');
+
 /**
  *
  * @param {string} viewPath 页面的路径 `@/view/${viewPath}`
  * @param {string} viewFileName  页面文件 默认 index.vue
  */
 export const getAsyncPage = (viewPath: string, viewFileName = 'index') => {
   if (viewPath.endsWith('.vue')) {
-    return () => import(/* @vite-ignore */ `../views/${viewPath}`);
+    const p = `../views/${viewPath}`;
+    const pathKey = Object.keys(viewsModules).find((key) => key === p)!;
+    // console.log('viewsModules[pathKey]', viewsModules[pathKey]);
+    return viewsModules[pathKey];
   } else {
-    return () => import(/* @vite-ignore */ `../views/${viewPath}/${viewFileName}.vue`);
+    const p = `../views/${viewPath}/${viewFileName}.vue`;
+    const pathKey = Object.keys(viewsModules).find((key) => key === p)!;
+    // console.log('viewsModules[pathKey]', viewsModules[pathKey]);
+    return viewsModules[pathKey];
+    // return () => import(/* @vite-ignore */ `../views/${viewPath}/${viewFileName}.vue`);
   }
 };
 

diff --git a/src/views/shared/login/index.vue b/src/views/shared/login/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login-box">
     <div class="login-logo">
-      <svg-icon icon-class="logo" />
+      <svg-icon name="logo" />
       <!--      <img src="~@/assets/images/logo.png" alt="">-->
       <h1 class="mb-0 ml-2 text-3xl font-bold">Antd Admin</h1>
     </div>
@@ -115,7 +115,7 @@
     width: 100vw;
     height: 100vh;
     padding-top: 240px;
-    background: url('~@/assets/login.svg');
+    background: url('@/assets/login.svg');
     background-size: 100%;
     flex-direction: column;
     align-items: center;

diff --git a/vite.config.ts b/vite.config.ts
@@ -8,18 +8,21 @@ import { resolve } from 'path';
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 import Components from 'unplugin-vue-components/vite';
 import WindiCSS from 'vite-plugin-windicss';
+import viteSvgIcons from 'vite-plugin-svg-icons';
+
 const CWD = process.cwd();
 
 // 环境变量
-const BASE_ENV_CONFIG = loadEnv('', CWD);
-const DEV_ENV_CONFIG = loadEnv('development', CWD);
-const PROD_ENV_CONFIG = loadEnv('production', CWD);
+// const BASE_ENV_CONFIG = loadEnv('', CWD);
+// const DEV_ENV_CONFIG = loadEnv('development', CWD);
+// const PROD_ENV_CONFIG = loadEnv('production', CWD);
 
 export default ({ command, mode }: ConfigEnv): UserConfig => {
   // 环境变量
   const { VITE_BASE_URL, VITE_DROP_CONSOLE } = loadEnv(mode, CWD);
 
-  // const isBuild = command === 'build';
+  const isBuild = command === 'build';
+  console.log('当前执行环境：', isBuild);
 
   return {
     base: VITE_BASE_URL,
@@ -43,6 +46,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       legacy({
         targets: ['defaults', 'not IE 11'],
       }),
+      viteSvgIcons({
+        // Specify the icon folder to be cached
+        iconDirs: [resolve(CWD, 'src/assets/icons')],
+        // Specify symbolId format
+        symbolId: 'svg-icon-[dir]-[name]',
+      }),
       Components({
         resolvers: [
           AntDesignVueResolver({