vue中引入jq

跟平常的引入是类似的，只是需要在配置文件中再加入一段。之前感觉很简单就没有写，但是用的时候总是要去搜一下，不如干脆自己记录一下，如下：

先安装

npm install jquery --save

在vue.config.js 文件中配置

因为vue-cli从3.0开始就没有config文件了，这里提供一个模板

var webpack = require('webpack')
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件需要npm安装

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: 'error', // 设置eslint报错时停止代码编译
    productionSourceMap: false, // 不需要生产环境的 source map（减小dist文件大小，加速构建）
    devServer: {
        open: true,  // npm run serve后自动打开页面
        host: '0.0.0.0',  // 匹配本机IP地址(默认是0.0.0.0)
        port: 8989, // 开发服务器运行端口号
        proxy: {
            '/api': {
                target: 'http://www.exaple.com', // 代理接口地址
                secure: false,  // 如果是https接口，需要配置这个参数
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    '^/api': ''   //需要rewrite的, 这里理解成以'/api'开头的接口地址，把/api代替target中的地址
                }
            }
        }
    },
    chainWebpack: (config) => {
        // 移除 prefetch 插件(针对生产环境首屏请求数进行优化)
        config.plugins.delete('prefetch')
        // 移除 preload 插件(针对生产环境首屏请求数进行优化)   preload 插件的用途：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
        config.plugins.delete('preload')
        // 第1个参数：别名，第2个参数：路径  （设置路径别名）
        config.resolve.alias
            .set('@pages', resolve('./src/page'))
            .set('@router', resolve('./src/router'))
            .set('@store', resolve('./src/store'))
            .set('@utils', resolve('./src/utils'))
    },
    // 配置打包 js、css文件为.gz格式，优化加载速度  （参考：https://blog.csdn.net/qq_31677507/article/details/102742196）
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new webpack.ProvidePlugin({
                        $: "jquery",
                        jQuery: "jquery",
                        "windows.jQuery": "jquery"
                    })
                ],
                performance: { // 生产环境构建代码文件超出以下配置大小会在命令行中显示警告
                    hints: 'warning',
                    // 入口起点的最大体积 整数类型（以字节为单位,默认值是：250000 (bytes)）
                    maxEntrypointSize: 5000000,
                    // 生成文件的最大体积 整数类型（以字节为单位,默认值是：250000 (bytes)）
                    maxAssetSize: 3000000
                    // // 只给出 js 文件的性能提示
                    // assetFilter: function (assetFilename) {
                    //   return assetFilename.endsWith('.js')
                    // }
                }
            }
        }
    }
}

在文件的头部位置加上const webpack = require(‘webpack’)，然后在module.exports中，添加

plugins: [

      new webpack.ProvidePlugin({

        $:"jquery",

        jQuery:"jquery",

        "windows.jQuery":"jquery"

      })

    ]

在main.js文件中引入

import $ from 'jquery'
Vue.prototype.$ = $

组件中调用的时候通过this.$方式

tip:

如果产生报错ReferenceError: $ is not defined

main.js中引入（挂载对象不同）

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

参考链接