在用Vue开发打包webpack时，项目中需要依赖到一个jQuery的插件mixitup。请问有什么解决方案吗？

Question

在用webpack打包时，项目中需要依赖到一个jQuery的插件mixitup。import后控制台报错 。请问有什么解决方案吗？

Uncaught ReferenceError: jQuery is not defined

Answer 1

解决方法如下：

在main.js里载入jQuery的JS（用import xxx.js），如果是用npm install装上的jQuery，那么加载语句类似

import 'jquery/dist/jquery.js'

其中，后缀名.js是可以省略的。

然后，这样还无法使Vue识别到加载进去的jQuery插件，所以需要在打包配置中加入一些新内容。
在build\webpack.base.conf.js配置文件中添加plugins配置（如果原来就有此配置部分则直接将内容添加进去即可），修改完的build\webpack.base.conf.js文件类似：（部分无关代码被省略）

var path = require('path');
...
var webpack = require('webpack'); // 注意这一行一定要加上，原本配置中没有，如果不加会导致下面报错webpack未定义
...

module.exports = {
    entry: { ... },
    output: { ... },
    resolve: { ... },
    module: { ... },
    ...
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery'
        })
    ]
};

然后就可以在Vue项目里和正常一样使用jQuery了。

Answer 2

ProvidePlugin

Answer 3

Jquery配置过了，可以用$的。

Answer 4

我也遇到了这个问题，该怎么解决呢？