尝试运行我的 nuxtjs
时发现此错误带有 vuetify
的应用程序在移动视口(viewport)上,但一切都在桌面视口(viewport)上运行良好。
本地机器上的错误 image : error on local machine :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.
使用 ubuntu 和 nginx 运行我的 nuxtjs 应用程序的服务器上的错误 pm2
使用yarn build
然后 pm2 start yarn -- start
image : error on serverDOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
这两个错误都发生在同一场景中。
当我在桌面视口(viewport)上运行它时,然后切换到移动视口(viewport)(不重新加载页面)它运行良好。但是如果我在移动视口(viewport)上重新加载它,就会发生这些错误。
不确定我应该分享哪个页面,因为即使在 nuxt+vuetify 默认主页上,所有页面都会发生此错误。
目前在桌面视口(viewport)上也会出现同样的错误,但是通过将我的组件包装在 <client-only></client-only>
中来修复它,并且错误从桌面视口(viewport)消失,但仍然发生在移动视口(viewport)上。
最佳答案
检查您是否在使用 v-if
指示
尝试将其更改为 v-show
因为v-show
呈现 HTML 并将 display 属性设置为 true 或 false,而 v-if
不渲染(真正的 conditional rendering )。
就我而言,我有 v-if
在我的模板中的一些节点上并将其替换为 v-show
将元素保留在 DOM 中并帮助丢失这样的节点错误。
关于javascript - nuxt js "Failed to execute ' appendChild' on 'Node' : This node type does not support this method"on mobile view port,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62124873/