Nuxt js의 vue-awesome-swiper(swiperjs)는 실가동에서는 동작하지 않지만 개발에서는 동작합니다.

Nuxt js의 vue-awesome-swiper(swiperjs)는 실가동에서는 동작하지 않지만 개발에서는 동작합니다.

vue-timeout-swiper를 사용하고 있으며 https://github.com/surmon-china/vue-awesome-swiper의 절차를 따릅니다.Nuxt js에서 이 플러그인을 글로벌하게 등록하기로 했습니다.

문제: 개발은 완벽하게 작동하고 슬라이드는 각 페이지에 표시되며 내비게이션은 작동합니다.한편, 프로덕션에서는 모든 슬라이드가 1페이지에 있고, 네비게이션은 모든 슬라이드가 1페이지에 있으므로 다른 페이지는 공백으로 둡니다.

개발 시:

실가동시:

다음은 내 파일입니다.

플러그인/VueAwesomeSwiper.js

import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';

// import style
import 'swiper/css/swiper.css';

Vue.use(VueAwesomeSwiper);

nuxt.config.config.syslog

...
css: [], <--- Do I need to add something to add here?
plugins: [
    { src: '~/plugins/VueAwesomeSwiper.js' },
  ]
...

더슬라이더표시하다

<template>
  <div>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <div slot="button-prev" class="swiper-button-prev"></div>
        <div slot="button-next" class="swiper-button-next"></div>
      </swiper>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class TheSlider extends Vue {
  swiperOption = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  };
}
</script>

<style>

</style>

제가 뭘 잘못하고 있는지 모르겠어요.누가 좀 도와줄래요?감사합니다!

변경처:

<div v-swiper="swiperOption">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Render original HTML in server, render Swiper in browser (client)
    </div>
  </div>
</div>

https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt 에서

그리고 그것은 성공하였다.

Swiper 6.0.0 이후를 사용하고 있는 경우는, 다음의 css 파일을 Import 합니다.

플러그인/VueAwesomeSwiper.js

import 'swiper/swiper-bundle.css'

Swiper 버전이 5.* 이하인 경우 다음 파일을 Import합니다.
플러그인/VueAwesomeSwiper.js

import 'swiper/css/swiper.css'

---

After installing, if pagination not working, downgrade your Swiper version to 5.*

---

Checkout this links:
https://github.com/surmon-china/vue-awesome-swiper
https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt

다음 URL에서 nuxt 예제 페이지의 설명서를 참조하십시오.

https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt

nuxt.config.js에 몇 줄을 추가합니다.

    export default {
  // some nuxt config...
  plugins: [
    { src: '@/plugins/nuxt-swiper-plugin.js', ssr: false },
  ],
  // some nuxt config...
  css: [
    // swiper style
    'swiper/css/swiper.css'
  ],
  // some nuxt config...
}

여기서 디렉티브 사용에 대한 리팩터링을 볼 수 있습니다.

SSR 코드 예: https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt

언급URL : https://stackoverflow.com/questions/61889192/vue-awesome-swiperswiperjs-on-nuxt-js-not-working-in-production-but-works-on-d