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

　　一、问题：

　　　　最近在写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