本頁將引導您如何將搭配 Webpack 的 Quasar CLI (@quasar/app-webpack - 前身為 @quasar/app) 專案轉換為搭配 Vite 的 Quasar CLI (@quasar/app-vite) 專案。
Step 1: Create a Quasar CLI with Vite project folder
$ yarn create quasar
# then pick "App with Quasar CLI", "Quasar v2", "Quasar App CLI with Vite"根目錄檔案有重大變更，因此產生新的專案資料夾比解釋眾多變更更容易。
Step 2: Copy folders from original folder
從您的原始專案資料夾中，完整複製這些項目
- /src (帶有小注意事項；請參閱後續步驟)
- /src-cordova
- /src-capacitor
- /src-electron
- /src-pwa (帶有小注意事項；請參閱後續步驟)
- /src-ssr (帶有小注意事項；請參閱後續步驟)
/src-bex不行，不要！
將 /src/index.template.html 移動到 /index.html。並進行以下變更
- <!-- DO NOT touch the following DIV -->
- <div id="q-app"></div>
+ <!-- quasar:entry-point -->此外，編輯 /src/router/index.js
// old way
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
// new way
history: createHistory(process.env.VUE_ROUTER_BASE)Step 3: Explicitly specify extensions on all your import statements
請確保所有 Vue 元件檔案 (SFC) 在匯入時明確指定 .vue 副檔名。省略副檔名在 Webpack 中可以運作 (因為 Quasar CLI 配置了要嘗試的副檔名列表)，但在 Vite 中則不行。
// BAD! Will not work:
import MyComponent from './MyComponent'
// GOOD:
import MyComponent from './MyComponent.vue'Step 4: Check the new quasar.config file
build、devServer 和所有 Quasar 模式 (pwa、ssr 等) 中的屬性都有變更。屬性詳細資訊請參閱quasar.config 檔案頁面。您必須手動將您的配置移植到搭配 Vite 的 Quasar CLI 架構。
TypeScript Aliases
如果您使用 TypeScript 並且在 tsconfig.json > compilerOptions > paths 中定義了自訂路徑別名，它們將不再自動處理。請參閱資料夾別名 | 處理 Vite以了解可用的處理方式。
Step 5: Browser compatibility
搭配 Webpack 的 Quasar CLI 專案依賴 /package.json > browserslist 來指定您要鎖定的瀏覽器。該屬性不再有任何意義。由搭配 Vite 的 Quasar CLI 管理的專案運作方式完全不同，您可能需要查看「瀏覽器相容性」頁面。
Step 6: SSR related
- 刪除
/src-ssr/directives資料夾 (如果您有的話) – 它不再有任何用途；請查看「Vue SSR 指令」頁面 - 將
/src-ssr/production-export.js檔案移植到/src-ssr/server.js；請務必先閱讀「SSR 網路伺服器」
更多資訊：設定 SSR
Step 7: PWA related
- 非常重要：在移植檔案之前，請執行指令
quasar mode add pwa。否則，所有需要的套件都不會新增，而且您的建置將會失敗。 - 輸出的 Service Worker 檔案的預設名稱已從
service-worker.js變更為sw.js。這可能會在第一次載入新應用程式時中斷您的更新程序。因此，如果您的應用程式已在生產環境中，為了確保從先前的 Webpack 建置順利升級，請確保名稱與您先前的 Service Worker 檔案名稱相符。您可以透過 quasar.config 檔案 > pwa > swFilename 進行設定。 - 搭配 Webpack 的 Quasar CLI 依賴
quasar.config 檔案 > manifest來指定 manifest，但您需要使用/src-pwa/manifest.json為搭配 Vite 的 Quasar CLI 宣告它。在/src-pwa/manifest.json中宣告 manifest 後，刪除quasar.config 檔案 > manifest區段。 - quasar.config 檔案中也有一些屬性不再可用。最值得注意的是：
metaVariables、metaVariablesFn。只需編輯/index.html並直接在那裡新增這些標籤即可。
<head>
<% if (ctx.mode.pwa) { %>
<!-- Define your custom PWA-related meta/link tags here. -->
<% } %>
</head>更多資訊：PWA - 準備
Step 8: BEX related
BEX 模式差異很大。搭配 Vite 的 Quasar CLI 專案中的 PWA 模式支援 PWA manifest v3 和多個內容腳本。您必須手動將您的 BEX 檔案移植到新的架構，不過這應該相當容易。
最好執行 $ quasar mode add bex，選擇您偏好的 PWA manifest 版本 (v2 或 v3) 並移植您的 BEX。
Step 9: And we’re done
$ quasar dev
$ quasar build