根据我导入的 Vue 构建，bootstrap-vue 的 `b-tabs` 呈现不同

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'）：

https://bootstrap-vue.js.org/docs#aliasing-vue-import

即用于 Webpack 配置

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