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

Question

我正在将 Bootstrap-Vue 库集成到基于 Nuxt.js 的项目中。我通读了官方文档以开始使用，但是尽管将 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)

标签： vue.jsbootstrap-4nuxt.jsbootstrap-vue

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)

我们将只导入我们想要使用的那些组件。更多信息可以在 bt-vue 文档中的Component groups and Directives as Vue plugins下找到

警告：我建议远离这种导入语法：

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 2transpile属性来构建我们的 es6 bt-vue 模块。不要忘记包含对 css 的引用，因为它是单独提供的。在我的设置中，我只是将常规引导程序包中的 SASS 文件直接导入到我的 index.scss 文件中，然后像往常一样将其包含在 nuxt.config.js 中。

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