為何捐款
API 瀏覽器
升級指南
NEW!
quasar.config 檔案
轉換為搭配 Webpack 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
命令列表
CSS 預處理器
路由
延遲載入 - 代碼分割
處理資源
啟動檔案
預取功能
API 代理
處理 Webpack
處理 process.env
使用 Pinia 的狀態管理
使用 Vuex 的狀態管理
Linter
測試與稽核
開發行動應用程式
Ajax 請求
開放開發伺服器給大眾
搭配 Webpack 的 Quasar CLI - @quasar/app-webpack
Capacitor 建置命令

開發中

$ quasar dev -m capacitor -T [ios|android]

# ..or the longer form:
$ quasar dev --mode capacitor --target [ios|android]

它將開啟 IDE (Android Studio / Xcode),從那裡您可以手動選擇模擬器 (或多個同時選擇!),並在其中安裝開發應用程式。您也可以在真實的手機/平板電腦裝置上執行開發應用程式。

WARNING

在 Android Studio 中,您會看到一則訊息建議升級 Gradle 版本。請勿升級 GRADLE,因為這會破壞 Capacitor 專案。任何其他要求的升級也一樣。

Gradle upgrade

如果您遇到任何 IDE 錯誤,請點擊「File」>「Invalidate caches and restart」。

Gradle upgrade

為了讓您能夠在裝置模擬器上或直接在手機上開發(包含 Hot Module Reload),Quasar CLI 會遵循以下步驟

  1. 偵測您機器的外部 IP 位址。如果偵測到多個 IP 位址,則會要求您選擇一個。如果您將使用手機進行開發,請選擇可從手機/平板電腦 Ping 到的機器 IP 位址。
  2. 它會在您的機器上啟動開發伺服器。
  3. 它會告知 Capacitor 使用先前偵測到的 IP。這允許應用程式連線到開發伺服器。
  4. 它使用 Capacitor CLI 更新您的所有外掛程式。
  5. 最後,它會開啟您的原生 IDE。在這裡執行您的應用程式,它會自動連線到開發伺服器。

WARNING

如果在手機/平板電腦上開發,非常重要的是,您的建置機器的外部 IP 位址可從手機/平板電腦存取,否則您會得到一個只有白畫面的開發應用程式。另請檢查您機器的防火牆,以允許連線到選擇的開發埠。

生產環境建置

$ quasar build -m capacitor -T [ios|android]

# ..or the longer form:
$ quasar build --mode capacitor --target [ios|android]
  • 這些命令會解析並建置您的 /src 資料夾,然後覆寫 /src-capacitor/www,然後使用 Gradle/xcodebuild 來產生最終資源,這些資源將放入手機/平板電腦中。

  • 建置的套件將位於 /dist/capacitor 中,除非另有設定。

  • 如果您希望跳過 Gradle/xcodebuild 步驟,僅填寫 /src-capacitor/www 資料夾

$ quasar build -m capacitor -T [ios|android] --skip-pkg
  • 如果您希望使用 IDE (Android Studio / Xcode) 手動建置最終資源,而不是執行終端機建置,則
$ quasar build -m capacitor -T [ios|android] --ide

WARNING

在 Android Studio 中,您會看到一則訊息建議升級 Gradle 版本。請勿升級 GRADLE,因為這會破壞 Capacitor 專案。任何其他要求的升級也一樣。

Gradle upgrade

如果您遇到任何 IDE 錯誤,請點擊「File」>「Invalidate caches and restart」。

Gradle upgrade

如果您想要啟用 UI 程式碼除錯功能的生產環境建置

$ quasar build -m capacitor -T [ios|android] -d

# ..or the longer form
$ quasar build -m capacitor -T [ios|android] --debug