Vue2和Vue3由于目錄結(jié)構(gòu)不同，因此，在引入jQuery時(shí)，配置方法也不同，特此寫(xiě)篇文章，做個(gè)記錄。

一、Vue兩個(gè)版本配置jQuery的相同之處

1.安裝jQuery

運(yùn)行命令，安裝jQuery。

npm install jquery --save

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

運(yùn)行命令，引入jQuery。

import $ from 'jquery

3.配置eslint檢測(cè)

如果沒(méi)有開(kāi)啟eslint檢測(cè)，本步不需要配置。

打開(kāi).eslintrc.js文件，在env中，添加jquery: true。默認(rèn)只有node :true。

二、Vue兩個(gè)版本配置jQuery的不同之處

1.Vue2配置jQuery

打開(kāi)/build目錄下的webpack.base.conf.js文件，在文件的頭部添加以下代碼：

const webpack=require("webpack")

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

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

2.Vue3配置jQuery

在Vue3中，由于目錄結(jié)構(gòu)與Vue2相比，變化較大，尤其是沒(méi)有build目錄，因此jQuery的配置方法也與Vue2不同。

打開(kāi)項(xiàng)目目錄下的vue.config.js文件，在頭部添加以下代碼：

const webpack = require('webpack')

找到module.exports配置項(xiàng)，在該配置項(xiàng)的configureWebpack屬性中，添加以下代碼：

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

具體如下圖所示：

或者在configureWebpack屬性中，添加plugins屬性，代碼如下：

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

至此，關(guān)于Vue2和Vue3引入jQuery的配置方法，記錄完畢。