Nuxt3遇见的坑（二）：Nuxt3 引入swiper

Nuxt3遇见的坑（二）：Nuxt3 引入swiper

网上查了很多方法都不好使，最后看文档摸索了一个
先安装swiper，我的版本是6.0.0-alpha.18

yarn add swiper

在组件中引用

<template>
  <div class="pageSwiper">
    <div class="swiper-container swiper">
      <transition :duration="duration">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in props.imgList"
            :key="index"
          >
            <div class="swiperImg">
              <img :src="item" alt="" />
            </div>
          </div>
        </div>
      </transition>
      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    </div>
  </div>
</template>
<script setup lang="ts">
import Swiper, { Autoplay, Navigation } from 'swiper';

// swiper.less/sass/css 决定了基础的样式
import 'swiper/swiper.scss';
Swiper.use([Autoplay, Navigation]);

const props = defineProps<{
  imgList: string[];
}>();

const duration = ref(0);

onMounted(() => {
  const ss = new Swiper('.pageSwiper .swiper', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    loopedSlides: 14,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    on: {
      progress: function (swiper, progress) {
        for (let i = 0; i < this.slides.length; i++) {
          let slide = this.slides.eq(i);
          let slideProgress = this.slides[i].progress;
          let modify = 1;
          if (Math.abs(slideProgress) > 1) {
            modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
          }
          let translate = slideProgress * modify * 260 + 'px';
          let scale = 1 - Math.abs(slideProgress) / 5;
          let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
          slide[0].style.transform =
            'translateX(' + translate + ') scale(' + scale + ')';
          slide[0].style.zIndex = zIndex;
          slide[0].style.opacity = 1;
          if (Math.abs(slideProgress) > 3) {
            slide[0].style.opacity = 0;
          }
        }
      },
      setTransition: function (swiper, transition) {
        for (let i = 0; i < this.slides.length; i++) {
          let slide = this.slides.eq(i);
          slide[0].style.transitionDuration = transition + 'ms';
        }
      },
    },
  });
});

swiper官网： https://swiperjs.com/vue

这样子引入swiper的时候，build的时候会出现问题

Swiper.use is not a function

// nuxt.config.ts
export default defineNuxtConfig({
build: {
transpile: [‘swiper’],
},
})