前提:外包写了个官网,纯html。无seo/不支持一套代码多个语言等,所以重构
开始进坑:用nuxt改写
swiper 巨巨巨多(跳坑请看正文第2点或爬坑)
1.nuxt不支持swiper,经常弹出。改用2之后少弹
2.改用vue-awesome-swiper,非常非常不顺利!!!!!百分之八十出现的bug全是这个的错(当然可能是我菜)
(1)老老实实下载swiper和vue-awesome-swiper不行,会遭遇样式消失等待各种版本问题,现在就是遇到比较稳定的就是vue-awesome-swiper v3.1.3 +swiper4.官网文档写有
"swiper": "^4.3.5",
"vue-awesome-swiper": "^3.1.3",
在plugin 目录下的swiper.js,
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
在config.js
plugins: [ { src: "~/plugins/vue-swiper.js", ssr: false }], // webpack plugin
(2)SSR又是巨坑,在config里配了不能服务器渲染,也就是说nuxt不用generate打包成html,改用服务器渲染的时候,这个swiper就失效了!!
– 前期用generate打包,没有问题,即使出现window is no defined 这种,加个标签就行了
– 改用服务器渲染,swiper失效,百度了很多种方法,不全。如果对源代码里渲染出元素没有要求,可以使用或标签包裹swiper
爬坑:官网明确指出,如果需要seo,需要用到v-swiper这个指令
局部引入
import Vue from 'vue'
import "swiper/dist/css/swiper.css"
if(process.browser){
const VueAwesomeSwiper=require('vue-awesome-swiper/dist/ssr')
Vue.use(VueAwesomeSwiper)
}
data 配置swiperOption