一、問題：

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

總結

以上是生活随笔為你收集整理的Vue导入非模块化的第三方插件功能无效解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。