Vue导入非模块化的第三方插件功能无效解决方案

最新推荐文章于 2024-03-19 17:52:27 发布

转载最新推荐文章于 2024-03-19 17:52:27 发布 · 576 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Joker-Face/p/11020231.html

文章标签：

#javascript #webpack #ViewUI

本文详细解析了在Vue项目中引入非模块化第三方插件时遇到的问题，特别是jQuery插件无法正常工作的情况。文章深入分析了原因，并提供了一种有效解决方案，通过在单页面中正确引入模块化jQuery，确保插件方法能够被成功注入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　一、问题：

　　　　最近在写vue项目时，想引入某些非模块化的第三方插件时，总是发现会有报错。且在与本地运行插件测试对比时发现插件根本没有注入到jQuery中（console.log($.fn)查看当前jq有哪些方法），例如：

       本地测试                                     　　　　　　　　　　　　　　　　　　　　　　　　　　　Vue页面测试

Object [jquery: "1.10.2",  …]           　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Object [jquery: "1.10.2",…] 
  .                                                                                         .
  .                                                                                         .
  .                                                                                         .
val: ƒ (e)                                                                                val: ƒ (e)
velocity: ƒ ()                                                                            width: ƒ (i,o)
width: ƒ (i,o)                                                                            wrap: ƒ (e) 
wrap: ƒ (e)                                                                               wrapAll: ƒ (e)
wrapAll: ƒ (e)                                                                            wrapInner: ƒ (e)
wrapInner: ƒ (e)

　　二、原因：

　　　　由于jQuery这类的通用插件基本都是在模块化引入进来，即在webpack.base.conf.js里引入，每个页面使用的都是通用jq，单页面引入的第三方插件并不会注入到通用的jq中，故jq内无插件方法。

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

　　　　肯定有人会疑惑，那我在单页面再单独引入jQuery与插件可以吗，很不幸地是此时js加载顺序是：单页面jQuery--->插件--->模块化jQuery--->插件，也就是说模块化的jq肯定会加载进来。

import  '../../static/jquery-background/js/jquery.min.js';
import  '../../static/jquery-background/js/velocity.js';

　　三、解决方案：

　　　既然模块化jq肯定会加载进来，只需把模块化jq引入单页面，拿插件方法注入。

　　　步骤：

　　　　①新建任意名.js，例如jquery-vendor.js；添加如下内容：

import $ from 'jquery'
window.$ = $
jQuery = $
window.jQuery = $
export default $

　　　　②将新建的js与插件放在static下同一文件夹下，然后vue页面引入即可:

import $ from '../../static/jquery-background/js/jquery-vendor.js';
import  '../../static/jquery-background/js/velocity.js';

转载于:https://www.cnblogs.com/Joker-Face/p/11020231.html