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

如何将jQuery嵌入VueJS for formBuilder中

1 个答案: