[Vue warn]：客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配（Nuxt / Vue / lerna monorepo）

Question

我正在尝试运行一个基本的 Nuxt 应用程序，其中包含使用 lerna monorepo 内的 vue-cli 构建的外部 Vue 组件。

\n\n

该页面简要显示组件内容（服务器呈现），然后消失并抛出以下错误。

\n\n

"export \'default\' (imported as \'Header\') was not found in \'a2b-header\'

\n\n

其次是

\n\n

Mismatching childNodes vs. VNodes: NodeList(7)\xc2\xa0[svg, text, div#app, text, h2.subtitle, text, div.links] (7)\xc2\xa0[VNode, VNode, VNode, VNode, VNode, VNode, VNode]

\n\n

最后是红色的 Vue 警告

\n\n

[Vue warn]: 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.

\n\n

我用于外部组件的设置是package.json：

\n\n

{\n  "name": "a2b-header",\n  "version": "0.1.0",\n  "private": true,\n  "main": "./dist/a2b-header.umd.js",\n  "scripts": {\n    "serve": "vue-cli-service serve",\n    "build": "vue-cli-service build --target lib --name a2b-header src/main.js",\n    "lint": "vue-cli-service lint"\n  },\n  "dependencies": {\n    "core-js": "^3.4.3",\n    "vue": "^2.6.10"\n  },\n  ...\n}\n

\n\n

我的main.js如下所示：

\n\n

import Header from \'./Header.vue\'\n\nexport default Header\n

\n\n

组件文件本身Header.vue是：

\n\n

<template>\n  <div id="app">\n    <h1>Welcome to Your Vue.js App</h1>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \'Header\'\n}\n</script>\n\n<style>\n#app {\n  font-family: \'Avenir\', Helvetica, Arial, sans-serif;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>\n

\n\n

所有内容都使用简单的方法导入到 Nuxt 项目index.vue中：

\n\n

import Header from \'a2b-header\'\n

\n\n

而且......它不起作用。我认为 SSR 与客户端的不匹配与错误的导出有关，可能可以通过某些 webpack 配置来解决，但在尝试了许多不同的事情之后，我在这里陷入了困境。

\n\n

我希望它能够工作的原因是，在 monorepo 中，我们计划拥有各种 Vue 应用程序（SPA 和 Nuxt），并且将公共代码封装在可跨不同项目重用的组件中的能力至关重要。

\n

Answer 1

将你的组件包裹起来<ClientOnly> <YourComponent> </ClientOnly>

转到官方 nuxt 文档以获取更多信息：

https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component