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

喜欢ヅ旅行 2023-10-18 14:26 108阅读 0赞

## 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的配置下添加多这一行配置
        }]);
      },

发表评论取消回复

表情：

评论列表（有 0 条评论，108人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap引入

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script ...

野性酷女/ 2024年04月18日 13:59/ 0 赞/ 76 阅读

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

vue-cli3.X 引入bootstrap出错处理问题描述: 使用npm命令安装了jquery和bootstrap, 然后在vue.config.js文件里配置

喜欢ヅ旅行/ 2023年10月18日 14:26/ 0 赞/ 109 阅读

相关 vuecli3.0全局引入jquery

之前使用jquery都是每个组件引入 import $ from 'jquery' 这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引

约定不等于承诺〃/ 2023年06月15日 09:53/ 0 赞/ 7 阅读

相关 vuecli3 多页面配置

vuecli3 多页面配置项目结构 1. login文件配置（有配置路由） login文件目录 lo

落日映苍穹つ/ 2023年01月19日 03:24/ 0 赞/ 420 阅读

相关解决 vue3.x 引入 bootstrap样式font字体库找不到

解决 vue3.x 引入 bootstrap样式font字体库找不到问题描述，在vue3.x项目中使用了bootstrap.css文件，运行项目，font库找不到异常信

痛定思痛。/ 2023年01月16日 02:16/ 0 赞/ 177 阅读

相关 HTML,bootstrap等引入vue,elementui 等；bootstrap 引入elementui

在非vue项目引用elementUI样式, 注意:数据定义 `data: function () {}` 而非data: () \{\} 方法一(通过 CDN 的方式加载

我就是我/ 2023年01月02日 02:20/ 0 赞/ 289 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 323 阅读

相关 html引入bootstrap,Webpack如何引入bootstrap的方法

Bootstrap中是一种事实上的界面标准，标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrapcss，就可以一个npm install完成项目的依

た入场券/ 2022年10月07日 04:45/ 0 赞/ 261 阅读

相关 Bootstrap link 引入3文件

[简单示例][Link 1] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

忘是亡心i/ 2022年05月01日 13:22/ 0 赞/ 207 阅读

相关 Webpack项目中引入Bootstrap4.x

Bootstrap是一个简洁、直观、强悍的前端开发框架，在Web开发中使用频率很高，本文主要记录一下如何在 webpack项目中引入Bootstrap4.x。由于Boots

悠悠/ 2021年11月04日 11:28/ 0 赞/ 440 阅读