本頁將引導您如何將搭配 Vite (@quasar/app-vite) 的 Quasar CLI 專案轉換為搭配 Webpack (@quasar/app-webpack) 的 Quasar CLI 專案。

步驟 1：建立搭配 Webpack 的 Quasar CLI 專案資料夾

$ yarn create quasar
# then pick "App with Quasar CLI", "Quasar v2", "Quasar App CLI with Webpack"

根目錄檔案有重大變更，因此與其解釋眾多變更內容，不如產生一個新的專案資料夾會更容易。

步驟 2：從原始資料夾複製資料夾

從您的原始專案資料夾中，完整複製以下項目

• /src (帶有小小的注意事項；請參閱後續步驟)
• /src-cordova
• /src-capacitor
• /src-electron
• /src-pwa
• /src-ssr (帶有小小的注意事項；請參閱後續步驟)
• /src-bex 不行。不要！

另外，將 /index.html 移動到 /src/index.template.html。並進行以下變更

<!-- quasar:entry-point -->

// replace with:

<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>

此外，編輯 /src/router/index.js

// old way
history: createHistory(process.env.VUE_ROUTER_BASE)

// new way
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)

步驟 3：檢查新的 quasar.config 檔案

在 build、devServer 和所有 Quasar 模式 (pwa、ssr 等) 中，屬性皆有變更。屬性詳細資訊請參閱 quasar.config 檔案 頁面。您將必須手動將您的設定移植到使用 Webpack 架構的 Quasar CLI。

步驟 4：瀏覽器相容性

使用 Webpack 的 Quasar CLI 專案依賴 /package.json > browserslist 來指定您目標鎖定的瀏覽器。更多資訊：瀏覽器相容性 頁面。

步驟 5：SSR 相關

將 /src-ssr/server.js 移植到 /src-ssr/production-export.js 檔案。請務必先閱讀關於 SSR Production Export 的內容。 production-export.js 本質上是從 src-ssr/server.js 預設匯出 listen() 方法。所有其他功能都無法移植。

更多資訊：設定 SSR

步驟 6：PWA 相關

對於使用 Webpack 的 Quasar CLI 專案，/src-pwa/manifest.json 沒有任何意義。您需要使用 quasar.config file > manifest 在那裡宣告它。之後，刪除 /src-pwa/manifest.json 檔案。

另請檢查 quasar.config file > pwa > metaVariables 和 metaVariablesFn。

更多資訊：設定 PWA

步驟 7：BEX 相關

BEX 模式差異很大。使用 Webpack 的 Quasar CLI 專案中的 PWA 模式不支援 PWA manifest v3 和多個內容腳本。您將必須手動將您的 BEX 檔案移植到新的架構。

最好 $ quasar mode add bex 並移植您的 BEX。

更多資訊：準備與資料夾結構 和 設定 BEX。

步驟 8：完成！

$ quasar dev
$ quasar build