Vue.js Nuxt.js+；引导Vue-单个组件和指令加载

我正在将引导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)

---

在对bt vue库进行了大量研究和修复后，我找到了解决这一难题的方法。 此解决方案适用于Nuxt 2，而不适用于Nuxt 1： 首先，您需要创建一个插件：

从“Vue”导入Vue
从“引导vue/es/组件/折叠”导入折叠
从“引导vue/es/组件/下拉列表”导入下拉列表
Vue.use（折叠）
Vue.use（下拉菜单）

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

模块：['bootstrap-vue/nuxt']，
bootstrapVue：{
bootstrapCSS:false，//在这里您可以禁用自动bootstrapCSS，以防您自己使用sass加载它
bootstrapVueCSS:false，//也可以禁用特定于bootstrapVue组件的CSS。这样，您就不会为不使用的模块加载CSS
componentPlugins:['Collapse'，'Dropdown'，//在这里，您可以指定要加载和使用的组件
directivePlugins:[]//在这里，您可以指定要加载和使用的指令。查看官方文档以获得可用指令的列表
}

您能从clarcdo尝试这个解决方案吗：将dom类添加到外部——const nodeExternals=require（'webpack-node-externals'）module.exports={build:{extend（config，ctx）{if（ctx.isServer）{config.externals=[nodeExternals（{白名单：[/^dom类/]}]}}}什么是dom类？我应该为此创建一个单独的模块吗？是否可以与Webpack 4一起使用？也许我可以使用extendBuild函数？小提示，在插件导入的开始，您需要

从“Vue”导入Vue

，不是吗？最新的BootstrapVue nuxt插件现在允许导入单个组件和指令。