具有Firebase集成的Nuxt SSR

Question

我試圖重組項目文件夾，以便可以將其部署到Firebase，看看此存儲庫Nuxt Firebase Vuetify 。 在nuxt.config.js我將buildDir更改為../functions/.nuxt ，乍一看它似乎../functions/.nuxt 。 但是，每當我使用來自UI框架（如Vuetify）的自定義組件時，它就會出錯。 在瀏覽器控制台上，出現這樣的錯誤

客戶端渲染的虛擬DOM樹與服務器渲染的內容不匹配。 這可能是由於不正確的HTML標記（例如，在<p>內嵌套塊級元素或缺少）引起的。 保齡水化和執行完整的客戶端渲染。

知道我該如何解決嗎？ 還是我錯過了該項目上的任何其他配置？

Answer 1

因此，這已經很老了，但是幾天前我碰巧碰到了同一問題，所以也許這可以對您或其他人有所幫助。

據我了解，此問題是由於vue模塊引起的，該模塊是Nuxt的依賴項，安裝在functions文件夾中。 當您在buildDir設置為functions/.nuxt運行Nuxt並import Vue from 'vue'插件中的import Vue from 'vue' ，您將獲得另一個Vue類，而不是Nuxt使用的類。 據我所知，這是Nuxt中的錯誤。

如何修復此問題：

• 取出nuxt和vue從你的模塊node_modules內部functions目錄，都將不分運行。
• 如果您在Firebase Functions中使用這些模塊中的任何一個，則需要在部署到Firebase之前重新安裝模塊。

Answer 2

Metaphalo的答案對我有用，我想補充一點，如果您有一個srcDir：'src'，其中所有nuxt目錄都在其中，我建議添加。

nuxt.config

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

所以你可以在開發中使用plogins