Vue CLI3.0 中使用JQuery

 

1.npm install jquery --save

2.在Vue.config.js文件中配置 (在3.0以上,webpack.base.conf.js文件中的设置改到在vue.config.js文件中设置),如果你的项目中没有 vue.config.js 文件，请你在 package.json 文件的同级目录新建一个 vue.config.js 文件。文件内具体的配置如下

const webpack = require("webpack");
module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。
//webpack ProvidePlugin 的含义是创建一个全局的变量，使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，创建 'Popper' 变量指向 popper.js 依赖。
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
       })
    ]
   }
}

3.在要使用的文件中导入 jQuery   import $ from 'jquery';

4.如果 eslint 报误，请设置 .eslintrc.js 文件。

• module.exports = {
   env: {
    node: true,
    jquery: true
   }
  };

PS:CommonsChunkPlugin 已被废除  

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
})
]

 请使用步骤2中的代码