V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
qq309187341
V2EX  ›  Vue.js

vue 动态组件自动导入问题

  •  
  •   qq309187341 · Mar 31, 2023 · 2713 views
    This topic created in 1124 days ago, the information mentioned may be changed or developed.
    vite 项目中使用 unplugin-vue-components 和 unplugin-auto-import 还有 unplugin-icons 等插件做自动第三方组件导入和 icon 导入的功能。但是发现图标使用动态组件就没办法了。请问需要如何处理?
    4 replies    2023-03-31 20:34:00 +08:00
    zcf0508
        1
    zcf0508  
       Mar 31, 2023 via Android
    没有办法,他们的原理都是理解你代码中的引用关系,在编译时帮你把以来添加进去,动态组件没有办法在编译时确定,就无法使用。
    kingterrors
        2
    kingterrors  
       Mar 31, 2023
    虽然我不知道我的理解对不对,以前在研究 unocss 的时候有过可能出现的类似的问题,你需要注意到两点:
    1. 如果使用 ts ,或许可以通过添加 icon 到`components.d.ts`到项目中。
    2. 是否因为动态导入被 treeshaking 掉了,所以没了。
    3. 如果符合第二点,并且动态导入的名称是拼接而成,是否能够通过显式声明这个 icon 组件的方式(但实际不展示)使其有效。

    具体场景和问题建议做个 demo ,sandboxcode 之类的发出来看看
    thinkershare
        3
    thinkershare  
       Mar 31, 2023
    如果是 SVG 的图标,我现在的办法是将图标作为一个远程资源去动态加载(当然这样也有缺陷), SVG 总是作为静态组件被全局引用,然后根据名称去匹配,这样静态引用时候使用具体的 Icon 的名称,动态引用的 svg 会去下载实际引用的资源。
    comeAcross
        4
    comeAcross  
       Mar 31, 2023
    vite+vue3_elementPlus 相同的问题,暂时是手动引入解决
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5630 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 07:56 · PVG 15:56 · LAX 00:56 · JFK 03:56
    ♥ Do have faith in what you're doing.