Vue 2.4组件引入Bootstrap 3 JS提示需jQuery的问题咨询

AI 小北

2026-10-7

问题根因

你的代码报错的核心原因是 ES6 import 语法存在变量提升特性：所有import声明都会被提升到当前作用域的最顶部优先执行，你虽然把window.jQuery = window.$ =require('jquery')写在了import 'bootstrap'的前面，但实际运行时 bootstrap 会先于 jQuery 挂载的逻辑加载，此时 window 对象上还没有 jQuery 变量，所以抛出依赖缺失错误。

可行解决方案

你可以任选以下任意一种方案修复：

方案1：将 bootstrap 的导入改为require语法，保证执行顺序
把你组件 script 里的对应代码改成如下形式即可：

window.jQuery = window.$ = require('jquery')
// 用require替代import，保证先挂载jQuery再加载bootstrap
require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'

方案2：通过webpack配置全局注入jQuery（更推荐，适合多组件用到bootstrap的场景）
不需要在组件内手动挂载jQuery，直接在打包配置里添加全局注入规则：

如果你用的是vue-cli 2.x项目，修改build/webpack.base.conf.js：

// 头部引入webpack
const webpack = require('webpack')

module.exports = {
  // ...其他原有配置
  plugins: [
    // ...其他原有插件
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
}

如果你用的是vue-cli 3/4/5项目，修改项目根目录的vue.config.js：

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
module.exports = defineConfig({
  // ...其他原有配置
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
})

配置完成后重启开发服务即可，组件内可以直接导入bootstrap，不需要手动挂载jQuery。

注意事项