我正在使用 vue-awesome-swiper 并按照此处的步骤操作:https://github.com/surmon-china/vue-awesome-swiper .我选择在 Nuxt js 中全局注册这个插件。
问题 :Dev 工作得非常好,幻灯片在每一页上,导航也能正常工作。另一方面,制作中的所有幻灯片都在第一页,导航在此处有效,其他页面为空白,因为所有幻灯片都在第一页上。
在开发上:
生产时:
这些是我的文件:
插件/VueAwesomeSwiper.js
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
// import style
import 'swiper/css/swiper.css';
Vue.use(VueAwesomeSwiper);
nuxt.config.js
...
css: [], <--- Do I need to add something to add here?
plugins: [
{ src: '~/plugins/VueAwesomeSwiper.js' },
]
...
slider .vue
<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
它奏效了。
关于vue.js - Nuxt js 上的 vue-awesome-swiper(swiperjs) 不能在生产环境中工作,但可以在开发环境中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61889192/