Quasar CLI with Vite - @quasar/app-vite
注水是指在客戶端執行的程序，在此程序中，Vue 會接管伺服器傳送的靜態 HTML，並將其轉換為可對客戶端資料變更做出反應的動態 DOM。
由於伺服器已呈現標記，我們顯然不希望丟棄該標記並重新建立所有 DOM 元素。相反地，我們希望「注水」靜態標記並使其具有互動性。
警告
在開發模式下，Vue 將會斷言客戶端產生的虛擬 DOM 樹狀結構與伺服器呈現的 DOM 結構相符。如果存在不符之處，它將會中止注水，捨棄現有的 DOM 並從頭開始呈現。在生產模式下，為了獲得最佳效能，此斷言會被停用。
注水注意事項
使用 SSR + 客戶端注水時，需要注意的一件事是某些可能被瀏覽器修改的特殊 HTML 結構。例如，當您在 Vue 範本中撰寫以下內容時
<table>
<tr><td>hi</td></tr>
</table>
content_paste
瀏覽器會自動在 `
` 內注入 ``，但是，Vue 產生的虛擬 DOM 不包含 ``，因此會造成不符。為了確保正確的匹配，請確保在您的範本中撰寫有效的 HTML。處理注水錯誤
如果您收到注水錯誤（如在主控台中看到的：「Vuejs Error - The client-side rendered virtual DOM tree is not matching server-rendered content」），您可以嘗試按照下列步驟操作
- 在 Chrome 中顯示 DevTools (F12)
- 載入導致「the client-side rendered virtual DOM tree…」警告的頁面。
- 捲動到 DevTools 主控台中的警告。
- 點擊 vue.runtime.esm.js 中警告的來源位置超連結。
- 在那裡設定一個中斷點（在原始碼瀏覽器中的行號上按一下滑鼠左鍵）。
- 再次讓相同的警告出現。通常透過重新載入頁面。如果有很多警告，您可以透過將滑鼠游標移到 `msg` 變數上來檢查訊息。
- 當您找到您的訊息並停在中斷點時，請查看呼叫堆疊。點擊一個框架向下呼叫「patch」以開啟其來源。將滑鼠游標懸停在 patch 中執行行上方 4 行的 hydrate 函數呼叫上。將會開啟 hydrate 來源的超連結。
- 在 hydrate 函數中，從開頭移動約 15 行，並在 `assertNodeMatch` 傳回 `false` 後傳回 false 的位置設定一個中斷點。在那裡設定中斷點並移除所有其他中斷點。
- 再次讓相同的警告發生。現在，當命中中斷點時，執行應該會在 hydrate 函數中停止。切換到 DevTools 主控台並評估 `elm`，然後評估 `vnode`。這裡 `elm` 似乎是伺服器呈現的 DOM 元素，而 `vnode` 是一個虛擬 DOM 節點。`Elm` 會以 HTML 格式印出，因此您可以找出錯誤發生的位置。
