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/.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 版本无关。以上是关于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