Блог

Изначально Owl.Carousel работал нормально, когда я запускал его под Vue-cli2.0, но после переноса проекта на Vue-cli 3.0 консоль продолжает выдавать эту ошибку.

 Uncaught TypeError: Cannot read property 'fn' of undefined
at eval (owl.carousel.js?555f:1718)
at eval (owl.carousel.js?555f:1755)
at Object../node_modules/owl.carousel/dist/owl.carousel.js (chunk-vendors.js:2031)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (main.js:28)
at Module../src/main.js (app.js:2285)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:2410)
  

И, похоже, что что-то пошло не так вowl.carousel.js (: 1718), помеченный инструментом разработки.

 $.fn.owlCarousel = function(option) { .......
  

Сначала я подумал, что неправильно импортировал jQuery, но после импортировал jQuery в локальный .Файл Vue (в котором использовалась carousel). Он все еще не работает.
Затем я нашел решение, которое импортирует jQuery из настройки webpack. Поэтому я добавляю некоторый код в «vue.config.js«

     const webpack = require('webpack');

   module.exports = {
     lintOnSave: false,
     configureWebpack: {
       plugins: [
         new webpack.ProvidePlugin({
           $: 'jquery',
           jQuery: 'jquery',
           'windows.jQuery': 'jquery',
         }),
       ],
     },
   };
  

Возможно ли, что Vue-cli 3.0 несовместим с Owl.Carousel или я просто неправильно импортирую jQuery?
В противном случае, кто-нибудь рекомендует другой плагин carousel, который может отображать несколько элементов одновременно, а также реагировать?