Bootstrap 5 Nuxt 动态组件不起作用答案

【问题标题】：Bootstrap 5 Nuxt dynamic components not workingBootstrap 5 Nuxt 动态组件不起作用
【发布时间】：2021-03-02 19:35:34
【问题描述】：

我正在尝试在我的 Nuxt project 中实现 Bootstrap 5。

样式可以正常工作，但过去使用 jQuery 的任何内容都不起作用。

我的安装过程：

从Bootstrap download page下载文件
创建/css 和/js 文件夹并移至资产文件夹
将bootstrap.css 放入/css 文件夹，将bootstrap.min.js 放入/js 文件夹
将配置添加到nuxt.config.js 文件：

css: [
   '@/assets/css/bootstrap.css'
],

js: [
   '@/assets/js/bootstrap.min.js'
],

刷新网站十几次。

这是我正在测试的代码，直接取自 Bootstrap 组件站点：

// index.vue
<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
   </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
   </ul>
</div>

【问题讨论】：

作为bootstrap-vue 模块（可以直接与 Nuxt 一起使用）的官方支持，这可能会很有趣：github.com/bootstrap-vue/bootstrap-vue/issues/5507
不幸的是，他们还需要一段时间才能发布 BootstrapVue / BS5 版本。

标签： javascript css nuxt.js bootstrap-5

【解决方案1】：

不要编辑您的 nuxt.config.js 文件 - 试试这个：

在 layouts/default.vue 中将以下代码添加到脚本部分
将 bootstrap 5 缩小的 js 和 css 捆绑文件放在 /static/bootstrap

<script>

export default {
  data () {
    return {

    }
  },

  head () {
    return {
      title: 'Test Page - My awesome project',
      link: [
        { rel: 'stylesheet', href: '/bootstrap/bootstrap.min.css' }
      ],
      script: [
        { src: "/bootstrap/bootstrap.bundle.min.js", type: "text/javascript"}
      ]

    }
  }


}
</script>

【讨论】：