[Vue warn]:客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配(Nuxt / Vue / lerna mon

Question

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

该页面简要显示组件内容(服务器呈现(，然后消失并引发以下错误。

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

其次

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

最后是红色 Vue 警告

[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.

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

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

我的主.js如下所示：

import Header from './Header.vue'
export default Header

和组件文件本身Header.vue是：

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

所有这些都被导入到Nuxt项目index.vue中使用简单：

import Header from 'a2b-header'

和。。。。它不起作用。我认为SSR与客户端的不匹配与不正确的导出有关，可能可以通过某些webpack配置来解决，但是在尝试了许多不同的事情之后，我在这里苦苦挣扎。

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

Answer 1

用<ClientOnly> <YourComponent> </ClientOnly>包装组件

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

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

Answer 2

经过大量的头部撞击后，解决方案如下。在nuxt.config.js中，在 extend 函数内部的构建块中，我们需要添加：

extend (config, ctx) {
config.resolve.symlinks = false
}

此设置最终正确构建了一个符号链接到Nuxt项目node_modules的共享包。导出默认错误消失，因此所有 SSR 与 Vnode 不匹配的警告。

Answer 3

您可以尝试使用 包装组件，或者将所有 dom 操作移动到挂载的生命周期钩子中。

https://github.com/nuxt/nuxt.js/issues/1700#issuecomment-331099596

这个答案可能会对你有所帮助