Nuxt采坑锦集

一. 在Nuxt中使用Element-UI报错

  1. 报错:直接安装官方NuxtCli脚手架 使用Element-UI 刷新页面报错
    nuxt错误1
1
2
3
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.

客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记造成的,例如将块级元素嵌套在<p>中,或者缺少<tbody>。对水化进行处理并执行完整的客户端呈现。
  1. 解决:找到项目目录下的 plugins/element-ui.js 将1 修改为2 重新启动服务
    nuxt错误2

  2. 引入其他的组件 插件可能也会出现这种问题 可以尝试使用包裹元素