Vue：从组件内部的库（Bootstrap-Vue）延迟加载

Question

我正在探索延迟加载功能，并且试图将其用于Bootstrap-Vue组件，但是它不起作用。

如果我“正常”导入b-card，它将正确呈现：

import { BCard } from 'bootstrap-vue';
export default {
    components: {
        BCard
    }
};

但是当我尝试使用“延迟加载”语法时，它不起作用：

export default {
    components: {        
        BCard: () => import('bootstrap-vue').BCard
    }
};

b-card组件未呈现，但未引发任何错误，在Chrome的DOM检查工具中，我可以看到占位符<!---->由Vue放置在b-card组件的位置。我怀疑加载的库对象不具有BCard属性，但是我不知道其他如何使用“惰性”语法访问库组件。

是否可以从库中延迟加载模块？怎么做？

Answer 1

动态导入模块时，将import关键字用作函数，它会返回一个promise。因此，要访问模块组件，可以使用以下语法：

export default {
  components: {
    BCard: () => import('bootstrap-vue').then(module => module.BCard)
  }
}