Vue.js 引入JQuery 及 JQuery-ui组件的使用

最近项目使用了JQuery-ui 的拖拽组件,Webpack打包出现 jquery is not defined 错误及ui组件无法使用。

最后的解决方式是,使用npm 包引入jQuery和expose-loader,在webpack.base.conf.js 中的alias引入jQuery,再添加jQuery插件,并在页面引入。

npm install jquery expose-loader --save

具体代码:

// webpack.base.conf.js 
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'jquery': 'jquery'  //引入jqeury
  }
}
// webpack.prod.conf.js
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      // 'process.env': env,
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery'
    })
    // ... 其他插件
  ]
// main.js
import $ from 'expose-loader?$!jquery'
import '../static/jquery-ui.min.js' 
window.$ = $

// 增加上面代码到main.js,便可以在全局范围内使用$及ui插件。

PS: 有可能页面还会报错,试着在页面单独引入JQuery

import $ from 'expose-loader?$!jquery'

或者是这个报错,同样适用。

This dependency was not found:

* expose-loader?$!jquery in ./src/main.js, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/boardTopu/index.vue and 1 other

To install it, you can run: npm install --save expose-loader?$!jquery

 

 

说点什么

avatar
  Subscribe  
提醒