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)
  }
}