fix: Icon加载问题

2025-09-05 03:37:59 +00:00 · 2023-04-06 22:47:39 +08:00
parent 553ee9c7ae
commit feadf64ee3
26 changed files with 35 additions and 32 deletions
--- a/internal/vite-config/src/config/application.ts
+++ b/internal/vite-config/src/config/application.ts
@@ -31,13 +31,6 @@ function defineApplicationConfig(defineOptions: DefineOptions = {}) {
    const pathResolve = (pathname: string) => resolve(root, '.', pathname);

    const applicationConfig: UserConfig = {
-      optimizeDeps: {
-        include: [
-          '@iconify/iconify',
-          'ant-design-vue/es/locale/zh_CN',
-          'ant-design-vue/es/locale/en_US',
-        ],
-      },
      resolve: {
        alias: [
          {
--- a/src/components/Application/src/search/AppSearchModal.vue
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -61,7 +61,7 @@
  import { computed, unref, ref, watch, nextTick } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import AppSearchFooter from './AppSearchFooter.vue';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';
  // @ts-ignore
  import vClickOutside from '/@/directives/clickOutside';
  import { useDesign } from '/@/hooks/web/useDesign';
--- a/src/components/ContextMenu/src/ContextMenu.vue
+++ b/src/components/ContextMenu/src/ContextMenu.vue
@@ -2,7 +2,7 @@
  import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
  import type { FunctionalComponent, CSSProperties, PropType } from 'vue';
  import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';
  import { Menu, Divider } from 'ant-design-vue';

  const prefixCls = 'context-menu';
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -45,7 +45,7 @@
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import type { ButtonProps } from '/@/components/Button';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';

  const props = {
    width: { type: [String, Number], default: '200px' },
--- a/src/components/Icon/index.ts
+++ b/src/components/Icon/index.ts
@@ -3,5 +3,3 @@ import SvgIcon from './src/SvgIcon.vue';
 import IconPicker from './src/IconPicker.vue';

 export { Icon, IconPicker, SvgIcon };
-
-export default Icon;
--- a/src/components/Menu/src/components/MenuItemContent.vue
+++ b/src/components/Menu/src/components/MenuItemContent.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
  import { computed, defineComponent } from 'vue';

-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { contentProps } from '../props';
--- a/src/components/SimpleMenu/src/SimpleSubMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleSubMenu.vue
@@ -48,7 +48,7 @@

  import { defineComponent, computed } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';

  import MenuItem from './components/MenuItem.vue';
  import SubMenu from './components/SubMenuItem.vue';
--- a/src/components/SimpleMenu/src/components/SubMenuItem.vue
+++ b/src/components/SimpleMenu/src/components/SubMenuItem.vue
@@ -75,7 +75,7 @@
  import { useMenuItem } from './useMenu';
  import { useSimpleRootMenuContext } from './useSimpleMenuContext';
  import { CollapseTransition } from '/@/components/Transition';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';
  import { Popover } from 'ant-design-vue';
  import { isBoolean, isObject } from '/@/utils/is';
  import { mitt } from '/@/utils/mitt';
--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -34,7 +34,7 @@
  import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
  import { MoreOutlined } from '@ant-design/icons-vue';
  import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';
  import { ActionItem, TableActionType } from '/@/components/Table';
  import { PopConfirmButton } from '/@/components/Button';
  import { Dropdown } from '/@/components/Dropdown';
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -21,7 +21,7 @@
  import { defineComponent, ref, watchEffect } from 'vue';

  import { Breadcrumb } from 'ant-design-vue';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
--- a/src/layouts/default/header/components/ErrorAction.vue
+++ b/src/layouts/default/header/components/ErrorAction.vue
@@ -13,7 +13,7 @@
 <script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { Tooltip, Badge } from 'ant-design-vue';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { useErrorLogStore } from '/@/store/modules/errorLog';
--- a/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
+++ b/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
@@ -11,7 +11,7 @@

  import { computed, defineComponent, getCurrentInstance } from 'vue';

-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';
  import { propTypes } from '/@/utils/propTypes';

  export default defineComponent({
--- a/src/layouts/default/setting/index.vue
+++ b/src/layouts/default/setting/index.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
  import { defineComponent } from 'vue';
  import SettingDrawer from './SettingDrawer';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';

  import { useDrawer } from '/@/components/Drawer';

--- a/src/views/demo/page/account/center/Application.vue
+++ b/src/views/demo/page/account/center/Application.vue
@@ -30,7 +30,7 @@
 <script lang="ts">
  import { defineComponent } from 'vue';
  import { List, Card, Row, Col } from 'ant-design-vue';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';
  import { applicationList } from './data';

  export default defineComponent({
--- a/src/views/demo/page/account/center/Article.vue
+++ b/src/views/demo/page/account/center/Article.vue
@@ -42,7 +42,7 @@
 <script lang="ts">
  import { defineComponent } from 'vue';
  import { List, Tag } from 'ant-design-vue';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';
  import { actions, articleList } from './data';

  export default defineComponent({
--- a/src/views/demo/page/account/center/index.vue
+++ b/src/views/demo/page/account/center/index.vue
@@ -56,7 +56,7 @@
  import { Tag, Tabs, Row, Col } from 'ant-design-vue';
  import { defineComponent, computed } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';
  import Article from './Article.vue';
  import Application from './Application.vue';
  import Project from './Project.vue';
--- a/src/views/demo/page/account/setting/AccountBind.vue
+++ b/src/views/demo/page/account/setting/AccountBind.vue
@@ -26,7 +26,7 @@
  import { List } from 'ant-design-vue';
  import { defineComponent } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';

  import { accountBindList } from './data';

--- a/src/views/demo/page/list/basic/index.vue
+++ b/src/views/demo/page/list/basic/index.vue
@@ -53,7 +53,7 @@
 <script lang="ts">
  import { Progress, Row, Col, List } from 'ant-design-vue';
  import { defineComponent } from 'vue';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';
  import { cardList } from './data';
  import { PageWrapper } from '/@/components/Page';

--- a/src/views/demo/page/list/card/index.vue
+++ b/src/views/demo/page/list/card/index.vue
@@ -34,7 +34,7 @@
 </template>
 <script lang="ts">
  import { defineComponent } from 'vue';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';
  import { cardList } from './data';
  import { PageWrapper } from '/@/components/Page';
  import { Card, Row, Col, List } from 'ant-design-vue';
--- a/src/views/demo/page/list/search/index.vue
+++ b/src/views/demo/page/list/search/index.vue
@@ -55,7 +55,7 @@
 <script lang="ts">
  import { Tag, List } from 'ant-design-vue';
  import { defineComponent } from 'vue';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';
  import { BasicForm } from '/@/components/Form/index';
  import { actions, searchList, schemas } from './data';
  import { PageWrapper } from '/@/components/Page';
--- a/src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue
+++ b/src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue
@@ -17,7 +17,7 @@
  import { IVFormComponent } from '../../../typings/v-form-component';
  import { remove } from '../../../utils';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';

  export default defineComponent({
    name: 'FormNodeOperate',
--- a/src/views/form-design/components/VFormDesign/components/FormOptions.vue
+++ b/src/views/form-design/components/VFormDesign/components/FormOptions.vue
@@ -38,7 +38,7 @@
  import { remove } from '../../../utils';
  import message from '../../../utils/message';
  import { Input } from 'ant-design-vue';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';

  export default defineComponent({
    name: 'FormOptions',
--- a/src/views/form-design/components/VFormDesign/components/RuleProps.vue
+++ b/src/views/form-design/components/VFormDesign/components/RuleProps.vue
@@ -38,7 +38,7 @@
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { isArray } from 'lodash-es';
  import { Form, FormItem, AutoComplete, Input } from 'ant-design-vue';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';

  export default defineComponent({
    name: 'RuleProps',
--- a/src/views/form-design/components/VFormDesign/modules/Toolbar.vue
+++ b/src/views/form-design/components/VFormDesign/modules/Toolbar.vue
@@ -31,7 +31,7 @@
  import { UseRefHistoryReturn } from '@vueuse/core';
  import { IFormConfig } from '../../../typings/v-form-component';
  import { Tooltip, Divider } from 'ant-design-vue';
-  import Icon from '/@/components/Icon/index';
+  import { Icon } from '/@/components/Icon/index';

  interface IToolbarsConfig {
    type: string;
--- a/src/views/form-design/components/VFormItem/index.vue
+++ b/src/views/form-design/components/VFormItem/index.vue
@@ -40,13 +40,13 @@
  </Col>
 </template>
 <script lang="ts">
+  import { type Recordable } from '@vben/types';
  import { defineComponent, reactive, toRefs, computed, PropType, unref } from 'vue';
  import { componentMap } from '../../core/formItemConfig';
  import { IVFormComponent, IFormConfig } from '../../typings/v-form-component';
  import { asyncComputed } from '@vueuse/core';
  import { handleAsyncOptions } from '../../utils';
  import { omit } from 'lodash-es';
-  import { type Recordable } from '@vben/types';
  import { Tooltip, FormItem, Divider, Col } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { useFormModelState } from '../../hooks/useFormDesignState';
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,18 @@ import { defineApplicationConfig } from '@vben/vite-config';

 export default defineApplicationConfig({
  overrides: {
+    optimizeDeps: {
+      include: [
+        'echarts/core',
+        'echarts/charts',
+        'echarts/components',
+        'echarts/renderers',
+        'qrcode',
+        '@iconify/iconify',
+        'ant-design-vue/es/locale/zh_CN',
+        'ant-design-vue/es/locale/en_US',
+      ],
+    },
    server: {
      proxy: {
        '/basic-api': {