关于Vue2和Vue3引入jQuery不同配置的记录

Vue2和Vue3由于目录结构不同，因此，在引入jQuery时，配置方法也不同，特此写篇文章，做个记录。

一、Vue两个版本配置jQuery的相同之处

1.安装jQuery

运行命令，安装jQuery。

npm install jquery --save

2.在main.js文件中引入jQuery

运行命令，引入jQuery。

import $ from 'jquery

3.配置eslint检测

如果没有开启eslint检测，本步不需要配置。

打开.eslintrc.js文件，在env中，添加jquery: true。默认只有node :true。

二、Vue两个版本配置jQuery的不同之处

1.Vue2配置jQuery

打开/build目录下的webpack.base.conf.js文件，在文件的头部添加以下代码：

const webpack=require("webpack")

在module.exports中添加以下代码：

plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })

2.Vue3配置jQuery

在Vue3中，由于目录结构与Vue2相比，变化较大，尤其是没有build目录，因此jQuery的配置方法也与Vue2不同。

打开项目目录下的vue.config.js文件，在头部添加以下代码：

const webpack = require('webpack')

找到module.exports配置项，在该配置项的configureWebpack属性中，添加以下代码：

configNew.plugins= [
      new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
      })
    ]

具体如下图所示：

或者在configureWebpack属性中，添加plugins属性，代码如下：

 plugins: [
      new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
      })
    ]

至此，关于Vue2和Vue3引入jQuery的配置方法，记录完毕。