vue-awesome-swiper 踩到的巨坑 打包之后分页和3d效果丢失

版本 ：vue-awesome-swiper4.1.1 和 swiper7.3.4
打包之前样式完全没问题，打包之后打包之后分页和3d效果都丢失了

打包之前

打包之后

<template>
  <!-- navigation -->
  <swiper :options="swiperOption"
          :pagination="{ clickable: true }"
          class="companySL__srollImg">
    <swiper-slide class="companySL__srollImg__item"
                  v-for="(item,index) of data"
                  :key="index">
      <img :src="item.img"
           alt="">
      <!-- <div>
        <span>{{item.title}}</span>
        <div>产品介绍产品介绍产品介绍产品介绍，产品介绍产品介绍，产品介绍产品介绍，产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
      </div> -->
    </swiper-slide>
    <div class="swiper-pagination"
         id="myPagn"
         slot="pagination"></div>
    <!-- <div class="swiper-button-prev"
         slot="button-prev"></div>
    <div class="swiper-button-next"
         slot="button-next"></div> -->

  </swiper>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import Swiper2, { Autoplay, Navigation, Pagination, EffectCoverflow } from 'swiper'
import 'swiper/swiper-bundle.css'

Swiper2.use([Autoplay])
Swiper2.use([Navigation, Pagination, EffectCoverflow])
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      data: [
        { img: require('../../assets/img/slPage/cp1.png') },
        { img: require('../../assets/img/slPage/cp2.png') },
        { img: require('../../assets/img/slPage/cp3.png') },
        { img: require('../../assets/img/slPage/cp4.png') },
        { img: require('../../assets/img/slPage/cp5.png') }
      ],
      swiperOption: {
        speed: 5000, // 切换速度
        // 设定初始化时slide的索引
        initialSlide: 0,
        spaceBetween: 15, // 间隙
        // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
        direction: 'horizontal',
        // 修改swiper自己或子元素时，自动初始化swiper
        observer: true,
        // 修改swiper的父元素时，自动初始化swiper
        observeParents: true,
        // 自动切换图配置
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 环状轮播
        loop: true,
        slidesPerView: 1.3,
        centeredSlides: true,
        effect: 'coverflow', // 要写
        // grabCursor: true, // 小手
        coverflowEffect: {
          rotate: 0, // 30 有3D效果
          stretch: 0,
          depth: 60, // slide的位置深度
          modifier: 13,
          slideShadows: true
        },
        // pagination: true,
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          '--swiper-theme-color': 'yellow',
          clickable: true // 允许分页点击跳转
        }
        // 设置点击箭头
        // freeMode: false,
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev'
        // }
      }
    }
  },
  methods: {
    // onSwiper (swiper) {
    //   console.log(swiper)
    // }
  }
}
</script>

好了，这个坑爬出来了，配置文件里面有个PurgecssPlugin，打包的时候会删除系统自认为无用的样式，在里面写入whitelistPatterns: [/el-./, /swiper/]，这个属性意思大概就是不要动那些样式 这都是针对第三方组件库的样式……