如何在 VueJS 中为 formBuilder 嵌入 jQuery

Question

我遇到了一个问题，jQuery即使我已经安装了它，我也不知道为什么找不到插件错误。我打算将它formBuilder用于我的 VueJS 项目 https://formbuilder.readthedocs.io/en/latest/getting-started在我的 HelloWord.vue 文件中，import $ from 'jquery';window.$ = window.jQuery = require('jquery');window.$ = $.extend(require('jquery-ui'));import formBuilder from 'formBuilder';我确实喜欢那样，但我收到以下错误消息。请告诉我如何解决它，谢谢。form-builder.min.js?f008:19 Uncaught ReferenceError: jQuery is not defined    at eval (form-builder.min.js?f008:19)    at Object../node_modules/formBuilder/dist/form-builder.min.js (app.js:1678)    at __webpack_require__ (app.js:727)    at fn (app.js:101)    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/HelloWorld.vue?vue&type=script&lang=js&:4)    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-

Answer 1

可以通过new Webpack.ProvidePluginwebpack解决。

const Webpack = require('webpack')

// ...

plugins: [

  new Webpack.ProvidePlugin ({

    $: 'jquery',

    'window.jQuery': 'jquery',

    jQuery: 'jquery'

  })

],

更新

如果使用vue-cli 3，修改vue.config.js文件如下：

const Webpack = require('webpack')

module.exports = {

  // ...

  configureWebpack: config => {

    config.plugins = [

      ...config.plugins,

      new Webpack.ProvidePlugin({

        $: 'jquery',

        'window.jQuery': 'jquery',

        jQuery: 'jquery'

      })

    ]

  }

}

另外，在终端输入命令设置整个webpack。这将生成 webpack.txt。

vue inspect > webpack.txt