Question

我正在将Bootstrap-Vue库集成到基于Nuxt.js的项目中。我通读了official documentation入门，但是尽管将bt-vue作为单个模块导入是可以的，但我希望能够导入各个组件和指令以减小生成的文件大小并使我的设置尽可能有效。文档仅提供有关该主题的常规Vue.js项目的解决方案，但是如何编写一个插件使我可以对Nuxt进行相同操作？

我首先创建了一个bt-vue.ts插件，如下所示：

import Vue from 'vue'
import { Card } from 'bootstrap-vue/es/components';

Vue.use(Card);

我已将此文件导入nuxt.config.js插件部分

plugins: [
...
'@/plugins/bt-vue'
...
]

但是当我尝试编译我的项目时，我收到此错误：

node_modules\bootstrap-vue\es\components\index.js:1
  (function (exports, require, module, __filename, __dirname) { import Alert from './alert';
  ^^^^^^

  SyntaxError: Unexpected token import
  at createScript (vm.js:80:10)
  at Object.runInThisContext (vm.js:139:10)
  at Module._compile (module.js:616:28)
  at Object.Module._extensions..js (module.js:663:10)
  at Module.load (module.js:565:32)
  at tryModuleLoad (module.js:505:12)
  at Function.Module._load (module.js:497:3)
  at Module.require (module.js:596:17)
  at require (internal/module.js:11:18)
  at r (C:\Projects\Wonder\frontend-nuxt\node_modules\vue-server-renderer\build.js:8330:16)
  at Object.bootstrap-vue/es/components (server-bundle.js:5771:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../plugins/bt-vue/index.ts (plugins/bt-vue/index.ts:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../.nuxt/index.js (.nuxt/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)

Answer 1

经过大量研究和对bt-vue lib的修复，我找到了解决此难题的方法。此解决方案适用于 Nuxt 2 ，并且不适用于与Nuxt 1：首先，您需要创建一个插件：

import Vue from 'vue'
import Collapse from 'bootstrap-vue/es/components/collapse'
import Dropdown from 'bootstrap-vue/es/components/dropdown'

Vue.use(Collapse)
Vue.use(Dropdown)

我们将仅导入要使用的那些组件。可以在作为Vue插件的组件组和指令

下的bt-vue文档中找到有关此信息的更多信息。

警告：我建议不要使用此类导入语法：

import { Modal } from 'bootstrap-vue/es/components';

因为它将始终导入components指令中的所有内容，并使用附加的JS代码污染您的最终捆绑包，因为它不会被正确摇晃（Webpack错误），并且这可能会破坏这种设置的整个目的，因此，请使用如上所述的显式导入。

然后将其连接到nuxt.config.js：

export default {
  build: {
    transpile: ['bootstrap-vue']
  },
  plugins: ['@/plugins/bt-vue']
}

如您所见，由于我们自己编写插件，因此无需包含模块，因此SSR不会出现问题！而且我们正在使用新的Nuxt 2 transpile属性来构建es6 bt-vue模块。不要忘了包含对CSS的引用，因为它是单独提供的。在我的设置中，我只是将常规引导包中的SASS文件直接导入到index.scss文件中，并照常将其包含在nuxt.config.js中。

css: [
    '@/assets/scss/index.scss'
  ]

Answer 2

自从2.0.0-rc.14版本开始使用带有Nuxt的BootstrapVue以来，由于引入了内置的Nuxt模块，因此无需手工创建插件，因此大大简化了操作。为了获得与上述相同的结果，您只需要注册一个bt-vue模块以及nuxt.config.js中的一些特殊设置：

modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
    bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
    bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
    componentPlugins: ['Collapse', 'Dropdown'], // Here you can specify which components you want to load and use
    directivePlugins: [] // Here you can specify which directives you want to load and use. Look into official docs to get a list of what's available
  }

如果您对如何加载特定bt-vue组件的scss感到好奇，那么：

@import "~bootstrap-vue/src/variables";
// All bt-vue styles can be imported with this reference
//@import "~bootstrap-vue/src/components/index";

// Importing only styles for components we currently use
@import "~bootstrap-vue/src/components/dropdown/index";

Nuxt.js + Bootstrap-Vue-单个组件和指令加载

2 个答案: