Vue中Bootstrap-Vue组件懒加载失败的解决方法咨询

嘿，我明白你现在遇到的困惑了——正常导入BCard组件完全没问题，但一用懒加载写法，组件就不渲染，DOM里只剩个占位符<---->，还没报错，确实挺让人摸不着头脑的。

问题出在哪？ #

你原来的懒加载写法有个核心错误：import('bootstrap-vue') 返回的是一个Promise对象，而不是直接的模块对象。你直接在后面加.BCard，相当于在Promise上找BCard属性，这显然是找不到的，所以组件无法被正确加载，自然就不会渲染了。

正确的懒加载写法 #

这里有几种靠谱的方式可以实现BCard的懒加载：

方法1：用Promise的then()解构模块

利用Promise的then方法，等模块加载完成后再取出BCard：

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

方法2：用async/await简化写法

箭头函数可以声明为async，用await等待模块加载完成后再返回BCard，代码更直观：

export default {
  components: {
    BCard: async () => {
      const bootstrapVue = await import('bootstrap-vue')
      return bootstrapVue.BCard
    }
  }
}

方法3：直接懒加载单个组件文件（更优）

如果Bootstrap-Vue支持单独导入子组件（大多数现代组件库都支持），你可以直接加载BCard对应的文件，这样能减少懒加载的体积，提升加载速度：

export default {
  components: {
    BCard: () => import('bootstrap-vue/es/components/card/card')
  }
}

注意：不同版本的Bootstrap-Vue可能文件路径略有不同，如果这个路径不行，可以去你项目的node_modules/bootstrap-vue目录里找card组件的具体位置。

这样修改后，BCard应该就能正常懒加载并渲染了。

内容的提问来源于stack exchange，提问作者Eggon