本頁僅適用於將 Quasar UI v1 應用程式 (使用 Vue 2) 升級至 Quasar UI v2 應用程式 (使用 Vue 3)。

從 Quasar v1 升級

Quasar v2 的 SSR 模式幾乎完全翻新了先前的版本，大幅改善了開發人員體驗。由於 Vue 3 的架構要求，因此需要進行一些變更。

請注意，目前唯一支援的 Nodejs 伺服器是 Expressjs。

改進重點總覽

• 引入 SSR 中介層 檔案的概念，這也允許在開發時對它們進行 HMR。這取代了舊的 index.js 和 extension.js。
• 現在，完全相同的中介層可以在開發和生產環境建置中執行，而不僅僅是舊的「SSR 擴充功能」。
• 您也可以為 SSR 中介層啟用程式碼檢查。
• 由於 Vue 3 的架構，您現在可以 (而且需要！) 為每個自訂 Vue 指令定義 SSR 轉換 (Quasar 提供的 Vue 指令不包含在內)。
• 開箱即用的 Typescript 支援。 src-ssr 下的所有 .js 檔案現在都可以重寫為 .ts。請務必閱讀 SSR 與 Typescript 以取得更多資訊。

/src-ssr 資料夾

舊的 結構

新的 結構

執行升級

舊的 index.js 和 extension.js 已經被更優越的 SSR 中介層檔案取代。最好先閱讀關於 SSR 中介層的內容，再深入研究。

那麼我們開始吧

1. 我們建議您將目前 src-ssr 資料夾的內容儲存到其他地方。
2. 移除並重新新增 Quasar SSR 模式 ($ quasar mode remove ssr, $quasar mode add ssr)。
3. 在 quasar.config 檔案 > ssr > middlewares: [] 下宣告中介層檔案。陣列應該看起來像這樣

middlewares: [
  'render' // should always keep this one as last one
]

4. 接著您將必須使用 SSR 中介層檔案來移植舊邏輯，這應該非常容易（因為您最終會將大部分舊程式碼複製貼上到中介層檔案中）。
5. 檢閱 quasar.config 檔案 > ssr 屬性。大多數舊屬性已被移除，並由新的屬性取代。
6. 檢查新的 /src-ssr/server.js 檔案。

另外請記住，您在 src-ssr/middlewares 資料夾中建立的檔案也需要在 quasar.config 檔案 > ssr > middlewares 下宣告。這是因為它們的順序很重要，就像套用任何 Expressjs 中介層的順序也很重要一樣。您可以使用 $ quasar new ssrmiddleware <name> 命令來加快速度。

始終將原始的 render 中介層保持在列表中的最後一個。

提示

• 您可能想要查看透過 quasar.config 檔案 > ssr 提供的新配置屬性。
• 您可能想要查看 ssrContext 頁面，其中詳細描述了您可以從中使用的屬性。
• 您可能想要查看 SSR Webserver 頁面，其中詳細描述了 server.js 可以為您做什麼。