nuxt 踩坑记录

用 nuxt 还不久,遇到了很多问题,在这里作记录css

第三方UI未开启ssr

这里有一个轮播图功能 bash

页面打开的时候刚开始是这样的:spa

让我以为很奇怪,不是ssr吗,HTML 标签有了,css 也有了,渲染出来这样子?ssr

仔细研究下拿到的 HTML 字符串,好像发现了什么。nuxt

<van-swipe autoplay="autoplay" indicator-color="white" data-v-2a183b29="">
    <van-swipe-item data-v-2a183b29="">
        <img src="57481897534.jpg" alt="" data-v-2a183b29="" />
    </van-swipe-item>

    <van-swipe-item data-v-2a183b29="">
        <img src="d58s4a.jpg" alt="" data-v-2a183b29="" />
    </van-swipe-item>

    <van-swipe-item data-v-2a183b29="">
        <img src="6s8w5q.jpg" alt="" data-v-2a183b29="" />
    </van-swipe-item>

    <van-swipe-item data-v-2a183b29="">
        <img src="m3f58s.jpg" alt="" data-v-2a183b29="" />
    </van-swipe-item>
</van-swipe>
复制代码

引用的 vant 标签没被解析成 HTML 标签,vant 的标签是在客户端渲染的,要解决这个问题,应配置让它在服务的渲染:code

plugins: [
        {
            src: '~/plugins/vant',
            ssr: true
        }
    ]
复制代码