Vue组件中ASCII艺术渲染遇Hydration不匹配问题求助

问题原因 #

你遇到的Hydration text content mismatch in <pre>和Hydration completed but contains mismatches错误，本质是服务端（或静态生成时）渲染的pre标签内容，与客户端Vue挂载后渲染的内容不一致。pre标签对空格、换行、缩进等空白字符极其敏感，哪怕细微差异都会触发该警告。

具体解决方法 #

1. 严格保证模板中pre标签内容的紧凑性 #

检查模板代码，确保{{ name }}和pre标签的首尾完全紧贴，不要有多余的换行、空格或缩进：

<!-- 错误写法：pre内部存在多余换行/空格 -->
<pre id="ascii-art">
    {{ name }}
</pre>

<!-- 正确写法：内容紧贴pre标签 -->
<pre id="ascii-art">{{ name }}</pre>

模板中的多余空白会被服务端渲染到HTML中，而客户端Vue渲染的是name的原始内容，两者不一致就会引发Hydration错误。

2. 确保服务端与客户端的name值完全一致 #

• 检查ASCII艺术内容，确认服务端和客户端的处理逻辑一致（比如换行符\n是否被统一保留，没有被转义或修改）。
• 如果ASCII内容来自外部资源（如文件、API），确保服务端和客户端获取的是完全相同的内容，包括所有空白字符。

3. 延迟到客户端挂载后再设置内容 #

如果服务端渲染时无法保证内容一致，可将name的初始化逻辑放到mounted钩子中，让服务端渲染时pre标签为空，客户端挂载后再填充内容：

<template>
    <div class="ascii">
        <pre id="ascii-art">{{ name }}</pre>
    </div>
</template>

<script>
export default {
    name: "Header",
    components: {
        Prompt
    },
    data() {
        return {
            name: ''
        };
    },
    mounted() {
        try {
            // 填入你的ASCII艺术内容，用模板字符串保留格式
            this.name = `
 _______
|       |
|       |
|_______|
            `.trim();
        } catch (error) {
            console.error("Error occurred while initializing 'name':", error);
            this.name = 'Error occurred while initializing name property';
        }
    }
}
</script>

这种方式避免了服务端与客户端的内容差异，但服务端渲染的页面首次加载时pre标签为空，客户端挂载后才会显示内容。

4. 跳过该元素的Hydration校验（兜底方案） #

如果以上方法均无效，可给pre标签添加v-pre指令，让Vue跳过对该元素的编译和Hydration校验，结合v-html渲染动态内容：

<pre id="ascii-art" v-pre v-html="name"></pre>

注意：使用v-html需确保name的内容安全，避免XSS风险。

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