Nuxt s-s-r 与 Firebase 集成

Posted

技术标签:

【中文标题】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/.nuxtimport Vue from 'vue' 运行 Nuxt 时,您将获得另一个 Vue 类,而不是 Nuxt 使用的。据我所知,这是 Nuxt 中的一个错误。

如何修复此问题:

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

【讨论】:

是不是也是Firebase的最低node版本造成的,目前Firebase有node版本6.x.x但Nuxt最低要求是8.x.x? 这完全是另一个问题,但如果全局组件也不能在本地工作,那么问题可能与 Node 版本无关。

以上是关于Nuxt s-s-r 与 Firebase 集成的主要内容,如果未能解决你的问题,请参考以下文章

如何通过云功能将 Nuxt s-s-r 应用部署到 Firebase?

带有 Firebase 身份验证的 Nuxt s-s-r 身份验证防护

如何将 Firebase Firestore 数据添加到 s-s-r Nuxt Apps Vuex Store

带有集成 REST API 后端的 s-s-r Nuxt.js

Nuxt s-s-r 设置导致 Tailwind 媒体查询崩溃

Nuxt.js 的 s-s-r 兼容组件库