具有Firebase集成的Nuxt SSR

Question

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

  

客户端呈现的虚拟DOM树不匹配   服务器呈现的内容。这可能是由错误的HTML引起的   标记，例如在＆lt; p＆gt;内嵌套块级元素，或   失踪 。保持水分并执行完整的客户端渲染。

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

Answer 1

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

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

如何修复此问题：

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

Answer 2

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

nuxt.config

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

因此您可以在dev中使用plogins