javascript - Nuxt SSR 与 Firebase 集成

Question

我尝试重组项目文件夹，以便将其部署到 Firebase，看看这个存储库 Nuxt Firebase Vuetify .在 nuxt.config.js 上，我将 buildDir 更改为 ../functions/.nuxt，乍一看它看起来很有效。但是每当我使用 Vuetify 等 UI 框架中的自定义组件时，它就会出错。在浏览器控制台，出现这样的错误

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 . Bailing hydration and performing full client-side render.

知道如何解决这个问题吗？或者我可能错过了该项目的任何其他配置？

Answer 1

所以这已经很老了，但我几天前碰巧遇到了同样的问题，所以也许这对你或将来的其他人有帮助。

据我了解，此问题是由于 vue 模块引起的，它是 Nuxt 的依赖项，安装在 functions 文件夹中。当你运行 Nuxt 并将 buildDir 设置为 functions/.nuxt 并在你的插件中 import Vue from 'vue' 时，你会得到另一个 Vue-类比 Nuxt 使用的类。据我所知，这是 Nuxt 中的一个错误。

如何修复此问题:

• 从 functions 目录中的 node_modules 中删除 nuxt 和 vue 模块，无论如何都会运行。
• 如果您在 Firebase 函数中使用这些模块中的任何一个，则需要在部署到 Firebase 之前重新安装这些模块。