Nuxt.js报错:The client-side rendered virtual DOM tree is not matching server-rendered content的两种情况解决办法

目录

第一种情况: 页面出现瞬间又消失不见

第二种情况: 页面正常加载,有几率刷新mounted方法加载两次,导致页面内容重复渲染;

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.

第一种情况: 页面出现瞬间又消失不见

解决办法: 是因为在开启了服务的情况下,在pages新建了文件夹. 这时候重启一下服务(即npm run dev)即可解决; 原因是服务端渲染和客户端虚拟DOM树内容不匹配;

第二种情况: 页面正常加载,有几率刷新mounted方法加载两次,导致页面内容重复渲染;

解决办法: 重启服务无效,逐一注释排查发现是option标签,删掉或注释即可解决; 暂未明白原因;

拓展:

中文机器翻译:

英文原版: 

图片原文地址:https://github.com/vuejs/vue-router/issues/740 

本人开发的微信小程序（已上线）:
有兴趣的可以看看, 可一键三连点点关注谢谢大家~
1、小绿抑郁测试助手（微信小程序）：一个完全免费无广告的抑郁症自测小程序, 收集了来自全球权威的问卷免费提供给大家使用.有新颖的的分数记录和海报分享, 可看可学!