Nuxt s-s-r 与 Firebase 集成

Posted 2023-02-22

【中文标题】Nuxt s-s-r 与 Firebase 集成

【英文标题】：Nuxt s-s-r with Firebase Integration

【发布时间】：2018-07-28 02:52:12

【问题描述】：

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

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

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

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

【问题讨论】：

也许您可以将src 文件夹移动到函数文件夹并将buildDir 设置为.nuxt 而不是../functions/.nuxt。然后在 Cloud Function 中将您的 buildDir 设置为 src/.nuxt

也许这个视频对你有帮助youtu.be/ZYUWsjUxxUQ

【参考方案1】：

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

nuxt.config

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

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

【参考方案2】：

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

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

如何修复此问题：

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

【讨论】：

是不是也是Firebase的最低node版本造成的，目前Firebase有node版本6.x.x但Nuxt最低要求是8.x.x？

这完全是另一个问题，但如果全局组件也不能在本地工作，那么问题可能与 Node 版本无关。