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

, or missing . Bailing hydration and performing full client-side render.


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

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

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

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


拓展:

中文机器翻译:

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

英文原版: 

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

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

你可能感兴趣的:(web前端,Vue,Nuxt.js)