Как встроить JQuery в VueJS для FormBuilder

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.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.txt.

vue inspect > webpack.txt