Nuxt.js 的一个常见错误警告

最新推荐文章于 2025-05-21 13:56:59 发布

weixin_34415923

最新推荐文章于 2025-05-21 13:56:59 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript markdown runtime ViewUI

原文链接：https://segmentfault.com/a/1190000018204878

本文探讨了在Nuxt.js应用中常见的客户端与服务器DOM树不匹配错误，分析了包括HTML规范不符及服务端与客户端数据不一致等可能原因，并提供了具体的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 Nuxt.js 的使用过程中会遇到这样一种错误：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

图片描述

简单翻译成中文是：

客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的，例如在<p>中嵌套块级元素或缺少<tbody>。

经调查发现原因可能有多种，故写些文字记录下来，以后发现别的再补上?。

可能原因 1 - 不符合HTML规范

就像警告信息中说的那样 - 由不正确的HTML标记引起的，例如在<p>中嵌套块级元素或缺少<tbody>。
对于这种情况，检查下是否有这样的模板内容是否有不遵守HTML规范的写法，改正就好了，问题不大。
如果是某个引入的插件导致的，自己没办法改，只能选择用<no-ssr>不让它在服务端渲染或者忽略警告。

可能原因 2 - 服务端和客户端数据不一致

有时候按照原因1找了很久也没能解决问题，但有其他一些怪异表现 - 列表渲染不正常：例如刚渲染完列表数量正常，加载完后数量就错了，或有数据消失了。
我遇到的这种情况是我的代码不规范，更改了数据内部的结构，例如下面的代码：

props: {
  sources: Array
},
computed: {
  formattedSources() {
    return this.sources.reduce((res, source) => {
      const urls = source.url.split('\n').filter(r => !!r)
      source.url = urls[0]
      res.push(source)
      urls.slice(1).forEach(url => {
        res.push({
          title: url,
          url
        })
      })
      return res
    }, [])
  }
}

这段代码中source.url = urls[0]这里我改动了props里的sources内部数据，导致Nuxt.js输出数据到页面，然后在浏览器端重新加载渲染时已近和服务端渲染时的数据不一致，出现了这个错误警告。那么解决方法也有了，不要篡原数据。另外，在computed中篡改数据本来就是错误的写法?。