vue-cli3.X 引入bootstrap出错处理

最新推荐文章于 2025-06-02 09:18:18 发布

原创最新推荐文章于 2025-06-02 09:18:18 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文解决在 Vue CLI3.x 中引入 Bootstrap 和 jQuery 后出现的 popper.js 依赖问题，通过 npm 安装 popper.js 并在 webpack 配置中进行正确设置，实现组件正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli3.X 引入bootstrap出错处理

问题描述:

使用npm命令安装了jquery和bootstrap, 然后在vue.config.js文件里配置jquery：

const path = require('path')
const webpack = require('webpack')

module.exports = {
  chainWebpack: (config) => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{ //配置jquery
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }]);
  },
  css: {
    sourceMap: true
  },
  devServer:{
    port:8090
  },
}

在main.js里面引入bootstrap

import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min.js'

但是npm run serve后, 出现错误:
This dependency was not found: * popper.js in ./src/assets/libs/bootstrap/js/bootstrap.min.js

原因

Bootstrap 的dropdown插件依赖popper.js

解决

npm install --save popper.js

在module.exports = {}中添加一下代码

chainWebpack: (config) => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js','default']  //在jquery的配置下添加多这一行配置
    }]);
  },