在 Nuxt 中渲染没有 v-html 的原始 HTML答案

【问题标题】：Render raw HTML without v-html in Nuxt在 Nuxt 中渲染没有 v-html 的原始 HTML
【发布时间】：2022-01-22 14:27:06
【问题描述】：

Vue 的解决方案是VHTML。但是如果我们尝试在 Nuxt 中使用它，我们会得到

client.js?1d97:57 [Vue warn]: You are using the runtime-only build of Vue where the 
template compiler is not available. Either pre-compile the templates into render functions, 
or use the compiler-included build.

(found in <Root>)

我尝试了以下解决方案（建议here）

build: {
 extend(config) {
  config.resolve.alias['vue'] = 'vue/dist/vue.common'
 }
}

但它并没有解决问题。

更多输出：

vue.common.dev.js?4650:6460 Mismatching childNodes vs. VNodes:  NodeList(2) [comment, comment] (117) [VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, ....

[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.

【问题讨论】：

你能分享你的模板代码吗？
@NickDawes 这只是VHTML(:html="arbitraryHTML")。当div(v-html="arbitraryHTML") 时，我的arbitraryHTML 正在呈现但没有错误。
你还在使用哈巴狗？
@kissu，当然它不是组件的根元素，但所有其他代码都可以正常工作，所以我想没关系。
这实际上很重要，具体取决于您的模板中的确切内容。顺便说一句，我的回答有帮助吗？

标签： nuxt.js

【解决方案1】：

不确定第一个问题，我们需要检查您的 nuxt.config.js 和 package.json 来解决这个问题，或者至少知道您是如何开始您的项目的。
链接的解决方案是 2017 年的，所以现在可能也不那么相关了。

从未听说过 VHTML，我真的不明白它的意义所在。它甚至不清理输出，并且是一个额外的依赖项。好处也不是很惊人，我会传递这个。
我建议使用常规的v-html 和my answer 中所示的消毒剂。

此外，DOM 不匹配的其余问题是使用 SSR 时的常见问题。
这是my answer关于如何解决这个问题以及原因是什么。

TDLR：这不是配置问题，而是模板问题。

【讨论】：