如何在 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

你可以通过webpack中的new Webpack.ProvidePlugin来解决。

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