前言

創(chuàng)新互聯(lián)公司專注于新鄉(xiāng)企業(yè)網(wǎng)站建設,響應式網(wǎng)站開發(fā),商城網(wǎng)站建設。新鄉(xiāng)網(wǎng)站建設公司,為新鄉(xiāng)等地區(qū)提供建站服務。全流程定制網(wǎng)站制作，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

在使用webpack作為構建工具，開發(fā) vue項目的時候，難免會用到 jquery這種第三方插件（畢竟都是從用jquery過來的），那么怎么引用呢？接下來我來說三種方法。

1 html 模板文件引用法，這種方法最直接也是我們最熟悉，直接在項目中的網(wǎng)頁模板文件中加入jquery的引用即可

a.引用

b.使用

2 expose-loader 引用法

a. 安裝jquery

npm i jquery -D

b. main.js中引用 jquery

import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'//加入此行

Vue.config.productionTip = false

console.warn("==============main.js輸出$對象======================");
console.log($);
console.log(window.$);

說明  此時我們會發(fā)現(xiàn)，main.js中我們引用了 jquery，$符號我們可以正常使用，但 window.$卻不能，而且 helloWorld這個組件中也引用不到$；為什么呢？因為webpack是最后會把代碼用閉包的方式打包，$對象并沒有掛載在window下，helloWorld這個組件中并沒有引用jquery所以它自然是拿不到的，那么怎么能做到在main.js中一次引用，每個組件都能拿到呢？

c. expose-loader將 jquery暴露至全局

1) 安裝 expose-loader

npm i expose-loader -D

2) webpack.config.js（vue-cli 創(chuàng)建的項目可在 webpack.base.conf.js）中配置當引用 jquery 時使用 expose-loader

......
 module: {
  rules: [
   //增加以下配置即可
   {
    test: require.resolve('jquery'),
    loader: 'expose-loader?$'
   },
.....

3 webpack插件法，給每個模塊注入$

webpack.config.js（vue-cli 創(chuàng)建的項目可在 webpack.base.conf.js）
中配置

引用 webpack

const webpack = require('webpack')

配置插件

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站欄目：詳解webpack引用jquery（第三方模塊）的三種辦法
路徑分享：http://chinadenli.net/article30/jeeiso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站制作、建站公司、外貿(mào)建站、響應式網(wǎng)站、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)