bootstrap-vue 的 `b-tabs` 呈现不同，具体取决于我导入的 Vue 构建

Question

我正在使用 bootstrap-vue，我注意到 b-tabs 根据我导入的 Vue 构建呈现不同：

如果我导入 vue 它会正确呈现： https://codesandbox.io/s/vue-template-77mzg

但是如果我导入 vue/dist/vue.common 或 vue/dist/vue 它会错误地呈现： https://codesandbox.io/s/vue-template-y0t15

此外，其他组件不会发生这种情况，例如 b-navbar-nav。无论我导入的 vue 构建如何，它们都能正确呈现。

我想了解为什么会这样，因为我需要导入一个包含编译器的 vue 版本，因为某些组件需要它。

谢谢！

Answer 1

当导入 Vue 的特定变体（即 commonjs vs ES）时，您需要在 webpack 中设置一个 alias 以确保 BootstrapVue（和其他依赖项，如 PortalVue）使用相同的 Vue 构建（因为 BootstrapVue 也从 vue 导入）。

查看有关设置别名的文档（这样您就可以 import Vue from 'vue'）：

即对于 Webpack 配置

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  }
}

bootstrap-vue's `b-tabs` renders differently depending on the Vue build that I import