如何在Vue项目中正确的引入JQuery

最新推荐文章于 2025-11-04 12:30:58 发布

原创最新推荐文章于 2025-11-04 12:30:58 发布 · 2.5w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue-js #jquery

Vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

2017年12月

3 篇文章

订阅专栏

本文详细介绍如何在Vue项目中正确引入JQuery。包括安装JQuery依赖、配置Webpack解析路径及提供全局变量等步骤，并提供了具体操作代码示例。

操作方法

安装jquery依赖
```
npm install jquery --save
```
修改两处配置文件（测试vue版本为2.5）

        // 整体位置
        module.exports = {
           // 其他代码...
           resolve: {
             extensions: ['.js', '.vue', '.json'],
             alias: {
               'vue$': 'vue/dist/vue.esm.js',
               '@': resolve('src'),
             }
           },

           // 增加一个plugins
           plugins: [
              new webpack.ProvidePlugin({
                  $: "jquery",
                  jQuery: "jquery"
              })
           ],

           // 其他代码...
        }