关于Vue2.0中引入jQuery

最新推荐文章于 2025-09-20 12:48:20 发布

原创最新推荐文章于 2025-09-20 12:48:20 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #vue

本文档介绍了如何在Vue项目中引入jQuery库，并通过配置vue.config.js文件设置Webpack的proxy代理，以实现本地开发时API请求的转发。同时，通过ProvidePlugin确保全局可以使用$符号调用jQuery。

1.npm i jquery -S
2.在vue.config.js（无该文件的在根目录创建该文件）中配置
添加configureWebpack中的内容

var webpack = require("webpack")
module.exports = {
    publicPath: "./",
    lintOnSave: false,
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        overlay: {
            warning: false,
            errors: false
        },
        proxy: {
            '/api': {
                target: '',//配置接口地址
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''  //请求的时候使用api去拼接剩下的具体请求的url即可
                }
            },
        }
    },
    configureWebpack:{
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ],
    }
    // css: {
    //     loaderOptions: {
    //         less: {
    //             javascriptEnabled: true
    //         }
    //     }
    // },
    // configureWebpack: {
    //     externals: {
    //         'AMap': 'AMap' // 高德地图配置
    //     }
    // }
}

3.使用，直接用$符就好

mounted() {
 // eslint-disable-next-line no-undef
  console.log($(".home"))
},