nuxt和php,vue.js [警告]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配（Nuxt - 糯米PHP...

我正在尝试运行一个基本的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

, or missing

. 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为：

Welcome to Your Vue.js App

export default {

name: 'Header'

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

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

import Header from 'a2b-header'

和....它不起作用。我认为SSR与客户端的不匹配关系到错误的导出，这可能可以通过某些webpack配置解决，但是在尝试了许多不同的方法后，我在这里苦苦挣扎。

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