Vue CLI 和 Bootstrap 通过 Webpack答案

【问题标题】：Vue CLI and Bootstrap via WebpackVue CLI 和 Bootstrap 通过 Webpack
【发布时间】：2018-06-12 09:32:03
【问题描述】：

我正在尝试让引导程序与 Vue CLI 一起工作。我像这样安装了 jQuery 和 Bootstrap：

npm install jquery bootstrap

然后像这样配置 webpack：

  module.exports = {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        tether: 'tether',
        Tether: 'tether',
        'window.Tether': 'tether',
        Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
        Button: "exports-loader?Button!bootstrap/js/dist/button",
        Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
        Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
        Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
        Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
        Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
        Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
        Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
        Util: "exports-loader?Util!bootstrap/js/dist/util",
      })
    ],
  }

虽然没有快乐。即使使用 jQuery。

我正在寻找 webpack 解决方案。

谢谢，杰米

【问题讨论】：

什么不适合你？类似$ is not defined? Or jQuery is not defined? 的错误消息
它也没有注册，所以我在控制台中什么也没有。我尝试使用控制台window.$，但它只返回ƒ $(selector, [startNode]) { [Command Line API] }，没有扩展功能的选项，所以我认为它根本没有设置。在尝试查看是否存在任何引导程序时，我还会收到 Uncaught ReferenceError。
@JamieBonnett 你是怎么解决这个问题的？

标签： twitter-bootstrap webpack vue-cli

【解决方案1】：

在您的 main.js 或 app.js（无论您使用哪个作为主要 Javascript 文件）中，添加以下内容：

import 'bootstrap'
window.$ = window.jQuery = require('jquery')

【讨论】：

我不想将它添加到脚本中，你有 webpack 替代方案吗？