Vuejs 錯誤：客戶端渲染的虛擬 DOM 樹與伺服器渲染的不匹配

Question

我在我的應用程式中使用 Nuxt.js / Vuejs，我在不同的地方不斷遇到此錯誤：

The client-side rendered virtual DOM tree is not matching server-rendered content.
This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>.
Bailing hydration and performing full client-side render.

我想了解調試此錯誤的最佳方法是什麼？這是我可以記錄/獲取客戶端和伺服器的虛擬 DOM 樹以便我可以比較並找到錯誤所在的方法嗎？

我的應用程式很大，手動驗證很困難。

Answer 1

對我來說，這個錯誤發生是因為在AsyncData 中取得陣列列表並透過v-for 渲染 標籤，我把 區塊中的>v-for 程式碼並解決問題

Answer 2

部分答案：使用 Chrome DevTools，您可以定位問題並準確地查看導致問題的元素。執行以下操作（我使用 Nuxt 5.6.0 和 Chrome 64.0.3282.186 執行此操作）

1. 在 Chrome 中顯示開發工具 (F12)
2. 載入導致「客戶端渲染的虛擬 DOM 樹...」警告的頁面。
3. 捲動到 DevTools 控制台中的警告。
4. 點擊警告的來源位置超連結（在我的例子中是 vue.runtime.esm.js:574）。
5. 在那裡設定斷點（在原始碼瀏覽器中的行號處按一下滑鼠左鍵）。
6. 使相同的警告再次出現。我並不是說這總是可能的，但就我而言，我只是重新加載頁面。如果有很多警告，您可以透過將滑鼠移到 msg 變數上來查看訊息。
7. 當您找到訊息並停在斷點處時，請查看呼叫堆疊。點擊向下一幀調用“patch”以開啟其原始程式碼。將滑鼠懸停在 patch 中執行行上方 4 行的 Hydro 函數呼叫上。將開啟指向Hydrate來源的超連結。
8. 在enchanted 函數中，從開頭移動大約15 行，並設定一個斷點，在assertNodeMatch 返回後返回false 假。在那裡設置斷點並刪除所有其他斷點。
9. 再次發出同樣的警告。現在，當遇到斷點時，執行應該在 enchanted 函數中停止。切換到 DevTools 控制台並評估 elm，然後評估 vnode。這裡 elm 似乎是一個伺服器渲染的 DOM 元素，而 vnode 是一個虛擬 DOM 節點。 Elm 會列印為 HTML，因此您可以找出錯誤發生的位置。