将 Jquery 添加到 Vue-Cli 3

Question

我目前正在尝试将 Jquery 添加到我的 vue-cli 项目中。我知道它会产生不良行为，但无论如何；由于不再有 build/webpack.base.conf.js 我尝试编辑 vue.config.js 添加：

  module.exports {
    ...
    chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      definitions[0] = Object.assign(definitions[0], {
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery',
        _: 'lodash'
      })
      return definitions
    })
  }
   ...
 }

或者

const webpack = require('webpack')

module.exports {
   ...
 plugins: [
  new webpack.ProvidePlugin({
     $: 'jquery',
     jquery: 'jquery',
     'window.jQuery': 'jquery',
     jQuery: 'jquery'
   })
  ]
   ...
 }

这两个选项似乎都不起作用。使用#1 似乎什么都没有发生，使用#2 我得到编译错误；不允许“插件”或“ProvidePlugin”未解决，当我尝试直接在 main.js 中导入 jQuery 并定义 $ 运算符时，当我尝试使用它时，jquery 保持未定义状态。

非常感谢您！

原文由 nonNumericalFloat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过添加到 main.js 来 解决它

window.$ = window.jQuery = require('jquery');

这对我来说是成功的，现在 jQuery 在 全球范围内 可用。

另一种方法是；

 Vue.use({
install: function(Vue, options){
    Vue.prototype.$jQuery = require('jquery'); // you'll have this.$jQuery anywhere in your vue project
    }
});

我希望这能帮助将来遇到同样问题的人。如果您仍然无法弄清楚，请查看 此问题 或查看 文档。

编辑： 确保你跑了 npm install jquery 。

原文由 nonNumericalFloat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

#2 你忘记将 configureWebpack 添加到 vue.config.js 中

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}

原文由 Rdzawobrody 发布，翻译遵循 CC BY-SA 4.0 许可协议