nuxt 踩坑记录

meahu

2019-05-22 907 阅读1分钟

用 nuxt 还不久，遇到了不少问题，在这里做记录

第三方UI未开启ssr

这里有一个轮播图功能

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

让我觉得很奇怪，不是ssr吗，HTML 标签有了，css 也有了，渲染出来这样子？

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

<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 的标签是在客户端渲染的，要解决这个问题，应配置让它在服务的渲染：

plugins: [
        {
            src: '~/plugins/vant',
            ssr: true
        }
    ]