vue和nuxt的整合项目报错【Vue warn】: The client-side rendered virtual DOM tree is....并且页面的生命周期函数执行两次，彻底解决方案！

news2026/5/3 15:33:37

问题描述当我在做一个查询课程详情的功能时候想顺便在后台修改课程的浏览量即让它加1但发现每次刷新页面数值竟然增加两次于是我在这个页面的生命周期函数里面打印东西发现每次打印的都是两次也就是说不知道为什么生命周期函数执行了两次而且一直让我在意的是浏览器控制台总是莫名其妙的打印出警告信息vue.runtime.esm.js?2b0e:619【Vue warn】:The client-side rendered virtualDOMtree is not matching server-rendered content.This is likely caused by incorrectHTMLmarkup,forexample nesting block-level elements insidep,or missingtbody.Bailing hydration and performing full client-side render.最可恨的是我尝试打包这个项目【npm run build】,然后使用生产环境进行运行【npm run start】。运行以后页面竟然报错大概意思是不能向node添加子标签整个页面很多内容都无法显示。这时候我就知道肯定出了很大的问题事关整个项目因为打包以后还有问题就关系部署这种问题很烦人。于是我搜集了很多的资料最终没有找到根本原因但是经过不断尝试却无意中发现了一个彻底的解决办法只要在布局文件里面添加如下图所示的标签即可解决让 no-ssr 这个双标签包含所有内容。大不了每个布局文件都如图添加上这个标签。而且打包和部署都没有了问题如果有哪位大佬知道根本原因并且为什么这样解决请评论告诉我我将万分感谢

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2433330.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！