Vue SSR hydration节点不匹配：DOM重复生成且未复用预渲染DOM

浏览器构建的Vue项目搭配Python Flask后端，预期前后端DOM完全一致且无后续变更，但Vue未复用服务端渲染的DOM，反而重新生成，且未删除初始DOM导致DOM重复。控制台报错如下：

vue.esm-browser.js:1617 
[Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(Comment) 
- Server rendered DOM: " " (text) 
  at <RouterView> 
  at <App>

Hydration complete but contains mismatches.

已隔离出纯HTML/JS的最小可复现场景。

• 清理RouterView周边的多余文本节点：报错核心是客户端生成的RouterView对应注释节点，和服务端输出的空格文本节点不匹配。检查服务端渲染的HTML，确保RouterView所在容器前后没有多余空格、换行或其他文本内容，让标签结构紧凑。
• 保证前后端路由完全匹配：客户端初始化Vue时，必须和服务端渲染时使用的路由保持一致，避免因路由差异导致虚拟DOM结构不同。
• 正确启用 hydration 模式：Vue 3中挂载实例时，通过createApp().mount('#app', true)启用hydration（第二个参数设为true），强制Vue复用已有DOM；Vue 2中则使用new Vue({ el: '#app', hydrate: true })。
• 统一模板空白处理：Vue模板编译会自动忽略部分空白，但服务端渲染的HTML可能保留这些空白。可以在模板中删除不必要的换行、空格，或使用v-pre指令锁定特定格式，确保前后端DOM结构的文本节点完全对齐。

内容的提问来源于stack exchange，提问作者Marcel