vue.js - [Vue 警告]:客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配( Nuxt / Vue / lerna monorepo )
问题描述
我正在尝试使用 lerna monorepo 中的 vue-cli 构建的外部 Vue 组件运行基本的 Nuxt 应用程序。
该页面简要显示组件内容(服务器渲染),然后它消失并引发以下错误。
"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"
},
...
}
我的main.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),并且将通用代码封装在可跨不同项目重用的组件中的能力至关重要。
解决方案
用<ClientOnly> <YourComponent> </ClientOnly>
获取更多信息,请访问官方 nuxt 文档:
https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component
推荐阅读
- postgresql - postgreSQL 中的条件更新
- excel - 使用过滤器连接范围
- netsuite - Suitescript 批准 RA
- html - 在 pdf 的嵌入中添加 s3 签名的 url 不起作用
- apache-storm - 我可以在本地模式下运行没有 zookeeper 的 apachestorm 吗?
- python - 如何在 python 中读取多个 wav 文件,并转换为 numpy 数组进行绘图
- awk - 用空格/字符替换只有一个字段的行
- java - 无法在 IntelliJ 中使用 jdk 11 编译,找不到符号
- matplotlib - 在 Windows 7 工作站上安装 Anaconda 后内联图和小部件的问题
- java - kafka 流处理器 Api 反序列化 avro 记录