nuxt 踩坑記錄

用 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
        }
    ]
複製代碼