V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qq309187341
V2EX  ›  Vue.js

vue 动态组件自动导入问题

  •  
  •   qq309187341 · 2023-03-31 10:22:00 +08:00 · 2082 次点击
    这是一个创建于 601 天前的主题,其中的信息可能已经有所发展或是发生改变。
    vite 项目中使用 unplugin-vue-components 和 unplugin-auto-import 还有 unplugin-icons 等插件做自动第三方组件导入和 icon 导入的功能。但是发现图标使用动态组件就没办法了。请问需要如何处理?
    4 条回复    2023-03-31 20:34:00 +08:00
    zcf0508
        1
    zcf0508  
       2023-03-31 10:27:50 +08:00 via Android
    没有办法,他们的原理都是理解你代码中的引用关系,在编译时帮你把以来添加进去,动态组件没有办法在编译时确定,就无法使用。
    kingterrors
        2
    kingterrors  
       2023-03-31 12:23:23 +08:00
    虽然我不知道我的理解对不对,以前在研究 unocss 的时候有过可能出现的类似的问题,你需要注意到两点:
    1. 如果使用 ts ,或许可以通过添加 icon 到`components.d.ts`到项目中。
    2. 是否因为动态导入被 treeshaking 掉了,所以没了。
    3. 如果符合第二点,并且动态导入的名称是拼接而成,是否能够通过显式声明这个 icon 组件的方式(但实际不展示)使其有效。

    具体场景和问题建议做个 demo ,sandboxcode 之类的发出来看看
    thinkershare
        3
    thinkershare  
       2023-03-31 13:24:24 +08:00
    如果是 SVG 的图标,我现在的办法是将图标作为一个远程资源去动态加载(当然这样也有缺陷), SVG 总是作为静态组件被全局引用,然后根据名称去匹配,这样静态引用时候使用具体的 Icon 的名称,动态引用的 svg 会去下载实际引用的资源。
    1xiaozi
        4
    1xiaozi  
       2023-03-31 20:34:00 +08:00
    vite+vue3_elementPlus 相同的问题,暂时是手动引入解决
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3017 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 14:18 · PVG 22:18 · LAX 06:18 · JFK 09:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.