如何在Nuxt.js项目中正确引入并使用Bootstrap插件

• 首先确认缺失核心依赖：Bootstrap 4.x 必须依赖jQuery运行，你当前的package.json中未引入该依赖，首先执行安装命令：
  npm install jquery@3.6.0 --save
  所有配置修改完成后，重启本地开发服务生效。
• 核对nuxt.config.js配置（即便你自认为配置无误，可对照以下内容排查）：
  1. 引入Bootstrap全局样式

  export default {
    css: [
      'bootstrap/dist/css/bootstrap.min.css'
    ],
  }
  

  2. 配置客户端插件引入Bootstrap JS

  plugins: [
    { src: '~/plugins/bootstrap.js', mode: 'client' }
  ],
  

  3. 配置webpack全局注入依赖，避免Bootstrap找不到全局变量
     首先在nuxt.config.js顶部引入webpack：

  const webpack = require('webpack')
  
  export default {
    // 其他已有配置
    build: {
      plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
          Popper: ['popper.js', 'default']
        })
      ]
    }
  }
  

• 新增插件文件：在项目plugins目录下新建bootstrap.js，内容如下：

  import 'bootstrap/dist/js/bootstrap.min.js'
  

• 客户端渲染包裹：所有调用Bootstrap JS功能的组件代码，需要用<client-only>标签包裹，避免服务端渲染时没有window对象导致JS初始化失败，示例：

  <client-only>
    <div class="dropdown">
      <!-- 下拉菜单等需要JS的Bootstrap组件 -->
    </div>
  </client-only>
  

• 冲突排查：如果配置完成后仍然失效，可临时注释ant-design-vue的样式和插件引入，测试是否为两个UI库的样式/JS冲突导致。

内容的提问来源于stack exchange，提问作者prince jonathan Bolampembe bat