无法在nuxt vue组件中导入引导程序[重复]答案

【问题标题】：Cannot import bootstrap in nuxt vue component [duplicate]无法在nuxt vue组件中导入引导程序[重复]
【发布时间】：2020-07-12 14:43:38
【问题描述】：

我无法在任何 vue 组件中导入引导程序（使用最新的 nuxtjs）。我明白了：

我的（简单）组件是：

<template>
  <h1>Empty index page</h1>
</template>

<script>
import Modal from 'bootstrap/js/src/modal'

export default {}
</script>

<style></style>

我真的被困住了。您有什么想法或建议吗？

【问题讨论】：

这能回答你的问题吗？ "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6
使用 bootstrap-vue，这里是文档：bootstrap-vue.js.org/docs/#nuxtjs-module

标签： vue.js webpack bootstrap-4 nuxt.js

【解决方案1】：

你应该使用 bootstrap-vue，他们解决了很多问题，而且他们的 tree-shacking 效果惊人。

您的代码将是

<template>
  <b-button v-b-modal.modal-1>Launch demo modal</b-button> 
  <b-modal id="modal-1" title="BootstrapVue" >
    <h1>Empty index page</h1>
  </b-modal>
</template>

<script>
  import { BModal, BButton } from 'bootstrap-vue'

  export default {
    name: "Modal Component",
    components: {
      'b-modal': BModal,
      'b-button': BButton
    }
  }
</script>

<style></style>

更多信息在bootstrap-vue guide

【讨论】：