关于vue项目切图的swiper套用之前写过方法，但是文中提到的vue-awesome-swiper插件和vue版本都一直在更新迭代，以至于隔了大半年以后，在用文中的方法套用的时候，仍然遇到了几个问题，下面做一些总结。

vue中允许你继续使用swiper的组件 vue-awesome-swiper

安装vue-awesome-swiper插件的时候，需要注意安装版本，目前默认安装swiper版本是6.0.4 （2021.7.15） ，swiper6.0.4的样式引用代码就和之前的有区别了，引用如下：

import ‘swiper/swiper-bundle.css’

import { Swiper, SwiperSlide, directive } from ‘vue-awesome-swiper’

对比传统的引用代码

import ‘swiper/dist/css/swiper.css’

import { Swiper, SwiperSlide, directive } from ‘vue-awesome-swiper’

 

安装指定版本的代码，一般是3.x版本

npm install vue-awesome-swiper@3 –save-dev

 

如果需要引用jquery，在main.js添加代码，引用代码如下:

import $ from './assets/js/jquery.js'

 

当npm run build 打包的时候报错，可以尝试这样解决

在semver.js(node_modules/semver/semver.js)里做了一些改动,代码如下:

// if ANY of the sets match ALL of its comparators, then pass
Range.prototype.test = function(version) {
    return true;//add 2019年3月6日13:34:50
  if (!version)
    return false;

  if (typeof version === 'string')
    version = new SemVer(version, this.options);

  for (var i = 0; i < this.set.length; i++) {
    if (testSet(this.set[i], version, this.options))
      return true;
  }
  return false;
};

去掉了检查版本，就不报错了

 

标签：swiper, vue, vue-awesome-swiper