[Vue][SSR] 抑制水合不匹配警告答案

【问题标题】：[Vue][SSR] Suppress hydration mismatch warning[Vue][SSR] 抑制水合不匹配警告
【发布时间】：2021-09-26 23:18:09
【问题描述】：

我正在将 Vue 组件渲染为 HTML，并且预计 DOM 渲染/水合与 HTML 渲染版本不完全匹配。

如何抑制水合不匹配警告？

上下文：我是 vite-plugin-ssr 的作者，我的一些用户需要它。

【问题讨论】：

所有警告/错误似乎都来自此文件github.com/vuejs/vue-next/blob/…，没有选项可以抑制警告。
不确定它是否有帮助，但您可以看看这个问题（与 Nuxt 相关）：stackoverflow.com/q/47862591/8816585 找不到抑制实际警告的解决方案，而是发现并避免它。跨度>
最重要的是，（从代码中）这些警告似乎只在 DEV 环境中引发......

【解决方案1】：

我希望通过评论您的帖子而不是发布答案来提供帮助。不过你可以试试看：

在 Vue 中没有直接等效于 React 的 react-dom/suppressHydrationWarning，但您可以通过以下几种方式抑制警告消息：

通过在 Vue 组件中将警告选项设置为 false：

<template>
  <div>
    <p v-warning="false">This will not generate a warning</p>
  </div>
</template>

通过设置全局 Vue.config。警告选项为 false ：

Vue.config.warning = false

通过将环境变量 VUE_WARNING_DISABLE 设置为 true ：

export VUE_WARNING_DISABLE = true

或者使用 vue-cli-plugin-suppress-warnings 插件。

【讨论】：

【解决方案2】：

我不知道是否有与 suppressHydrationWarning 对应的 Vue，但您可以尝试的一件事是在水合之前手动删除 DOM 内容。

const rootId = 'app'
const root = document.getElementById(vueRootId)
root.innerHTML = ''
// Your hydration code
// ...

请参阅Remove all child elements of a DOM node in JavaScript 了解删除 DOM 元素的子元素的替代方法。

【讨论】：