相关疑难解决方法(0)

我创建一个使用 Nuxt.js 和服务器端渲染的 Web 应用程序。

我不想暴露我的后端数据，所以我尝试使用 asyncData 和 Axios 向我的后端服务器请求。

但是 Nuxt.js 通过window.__NUXT__.data变量将我的后端数据暴露给客户端。

我尝试使用render:route钩子删除它，但它说

[Vue warn]：客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。这可能是由不正确的 HTML 标记引起的，例如在 p 内嵌套块级元素，或缺少 . 清除水合作用并执行完整的客户端渲染。

所以我尝试删除导致不匹配错误的脚本，但它使我的站点停止工作脚本。

那么问题来了：如何禁用客户端水合（客户端虚拟 DOM 树渲染）？或如何停止暴露原始数据？

我将 asyncData 与此代码一起使用：

asyncData ({ params, error }: { params: { id: string }, error: Function }) {
  return axios.post('(backend)', data).then(res => res.data ? ({ data: res.data }) : error({ statusCode: 400, message: 'Bad request' }));
}

我需要在 NuxtJs 中导入 Facebook Pixel 代码。

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

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

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

其次是

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]

最后是红色的 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>. …