配置 Cordova | Quasar Framework

搭配 Vite 的 Quasar CLI - @quasar/app-vite

設定 Cordova

我們將使用 Quasar CLI（和 Cordova CLI）來開發和建置行動應用程式。建置 SPA、PWA、Electron 應用程式或行動應用程式之間的差異僅由 “quasar dev” 和 “quasar build” 指令中的 “mode” 參數決定。

對於您的行動應用程式，有兩個非常重要的設定檔。我們將逐一介紹。

config.xml

對於您的行動應用程式，最重要的設定檔是 /src-cordova/config.xml。/src-cordova 資料夾是一個 Cordova 專案，因此請參考 Cordova 文件以了解其中每個檔案的作用。但現在，請花一些時間閱讀關於 config.xml 的內容。

此檔案中的某些屬性將被覆寫，我們將在下一節中看到。

quasar.config 檔案

Quasar CLI 協助您自動設定行動應用程式的某些屬性（來自 config.xml）：Cordova “id”、應用程式版本、描述和 android-versionCode。這是為了方便起見，讓您能夠在單一點上更改應用程式的版本，而不是需要同時觸碰的多個檔案，這樣容易出錯。

為了確定上述每個屬性的值，Quasar CLI

在 /quasar.config 檔案中尋找 “cordova” 物件。它是否具有 “version”、“description” 和/或 “androidVersionCode”？如果有，將使用它們。
如果沒有，則在您的 /package.json 中尋找 “cordovaId”、“version” 和 “description” 欄位。

/*
  return {
    cordova: {
      // ...defined by interface below
    }
  }
*/

interface QuasarCordovaConfiguration {
  /** If not present, will look for `package.json > version` */
  version?: string;
  /** If not present, will look for `package.json > description` */
  description?: string;
  androidVersionCode?: string;
  /**
   * Enable Xcode modern build even if after considering iOS-Cordova issues.
   * You can enable it if you know what you are doing,
   *  for example if you want to specify the build type in your “build.json”.
   *
   * @default false
   */
  noIosLegacyBuildFlag?: boolean;

  /**
   * (Requires @quasar/app-vite v1.8.5+)
   *
   * Function to return the Cordova build command parameters that
   * will be executed after the UI has compiled.
   *
   * @param context.debug - True if in debug mode
   * @param context.target - The target platform (ios/android)
   * @returns Array of strings (command parameters)
   *
   * @default: [ 'build', '--debug'/'--release', '--device', 'ios'/'android' ]
   * @example: ({ isDebug, target }) => [ 'build', `--${isDebug ? 'debug' : 'release'}`, '--device', 'target' ]
   */
  getCordovaBuildParams?: (context: { debug: boolean; target: 'ios' | 'android' }) => string[];

  /**
   * (Requires @quasar/app-vite v1.8.5+)
   *
   * Function to return the Cordova output folder after the "cordova build"
   * command is executed.
   * The relative to /src-cordova path is used to copy the Cordova output
   * to the /dist folder.
   *
   * @param context.debug - True if in debug mode
   * @param context.target - The target platform (ios/android)
   * @returns string | string[] | undefined - (relative path(s) from /src-cordova)
   *
   * @default ios: platforms/ios/build/... and android: platforms/android/app/build/outputs
   * @example:
   *    ({ isDebug, target }) => {
   *       return target === 'ios'
   *          ? `platforms/ios/build/${isDebug ? 'Debug' : 'Release'}-iphoneos
   *          : 'platforms/android/app/build/outputs'
   *    }
   * @example: (when interested in only one platform, leaving the other to the default value)
   *    ({ isDebug, target }) => {
   *       if (target === 'ios') {
   *          return `platforms/ios/build/${isDebug ? 'Debug' : 'Release'}-iphoneos`
   *       }
   *    }
   * @example: ()
   *    ({ isDebug, target }) => {
   *       if (target === 'ios') {
   *          // try these two folders
   *          return [ 'platforms/ios/build/device', 'platforms/ios/build/emulator' ]
   *       }
   *    }
   */
  getCordovaBuildOutputFolder?: (context: { debug: boolean; target: 'ios' | 'android' }) => string | string[] | undefined;
}

您可以設定的其他選項

return {
  framework: {
    config: {
      cordova: {
        // add the dynamic top padding on iOS mobile devices
        iosStatusBarPadding: true/false,

        // Quasar handles app exit on mobile phone back button.
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // On the other hand, the following completely
        // disables Quasar's back button management.
        backButton: true/false
      }
    }
  }
}

如果您想要修改 /src 中 UI 的 Vite 設定

module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf) {
        if (ctx.mode.cordova) {
          // do something with ViteConf
        }
      }
    }
  }
}

發現錯誤了嗎？在瀏覽器中編輯此頁面

1. 簡介

2. config.xml

3. quasar.config 檔案