Nuxt SSR 与 Firebase 集成

Question

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

客户端渲染的虚拟 DOM 树不匹配 服务器渲染的内容。这可能是由不正确的 HTML 引起的 标记，例如在

中嵌套块级元素，或者 失踪 。 Bailing hydration 并执行完整的客户端渲染。

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

Answer 1

Metaphalo 的答案对我有用，对此我想补充一点，如果您有一个 srcDir: 'src' ，其中所有 nuxt 目录都在其中，我建议添加。

nuxt.config

srcDir: 'src', buildDir: process.env.NODE_ENV === 'production' ? 'functions/.nuxt' : '.nuxt',

这样你就可以在 dev 中使用 plogins

Answer 2

所以这已经很老了，但我在几天前偶然发现了同样的问题，所以也许这可以帮助你或将来的其他人。

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

如何修复此问题：

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