vue.js - vue router中使用swiper插件提示swiperAnimateCache is not defined

问题描述

问 题

现在我想在vue-router项目中使用swiper动画插件，页面元素结构如下：

swiper的JS,CSS文件已经引入：

但是现在初始化swiper可以，但是动画效果却没有，一直报错：

swiperAnimateCache is not defined
出现这样的问题是什么原因呢，该怎么处理

解决方案

找到了解决方式：执行命令安装script-loader插件，npm install --save-dev script-loader
在webpack.base.conf.js里module的roles里增加配置：
{
test: /.exec.js$/,
use: [ 'script-loader' ]
}
然后在组件里引用：
import swiper from 'script-loader!assets/js/swiper/swiper.min.js'
import animate from 'script-loader!assets/js/swiper/swiper.animate.min.js'

动画的样式文件引用方式不变

这篇关于vue.js - vue router中使用swiper插件提示swiperAnimateCache is not defined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！