配置 Cordova | Quasar 中文网

Quasar CLI with Vite - @quasar/app-vite

配置 Cordova

我们将使用 Quasar CLI（和 Cordova CLI）开发和构建一个移动应用。构建 SPA、PWA、Electron 应用或移动应用之间的区别仅仅取决于 “quasar dev” 和 “quasar 构建” 命令中的 “mode” 参数。

¥We’ll be using Quasar CLI (and Cordova CLI) to develop and build a Mobile App. The difference between building a SPA, PWA, Electron App or a Mobile App is simply determined by the “mode” parameter in “quasar dev” and “quasar build” commands.

有两个配置文件对你的移动应用至关重要。我们将逐一介绍。

¥There are two configuration files of great importance to your mobile apps. We’ll go over each one.

config.xml(config.xml)

移动应用最重要的配置文件也是 /src-cordova/config.xml。/src-cordova 文件夹是一个 Cordova 项目，因此请参考 Cordova 文档文件夹以了解其中每个文件的功能。现在，请花点时间阅读一下 config.xml 的相关内容。

¥The most important config file for your mobile app is /src-cordova/config.xml. The /src-cordova folder is a Cordova project, so please refer to Cordova documentation in order to understand what each file from there does. But for now, have a few moments to read about config.xml.

此文件中的某些属性将被覆盖，我们将在下一节中看到。

¥Some properties from this file will get overwritten as we’ll see in next section.

quasar.config 文件(quasar.config file)

¥quasar.config file

Quasar CLI 可帮助你自动设置移动应用的一些属性（来自 config.xml）：Cordova “id”、应用版本、描述和 android-versionCode。这是为了方便起见，你可以在一个点（例如，更改应用版本）更改，而无需同时修改多个文件，因为这样容易出错。

¥Quasar CLI helps you in setting some properties of the mobile Apps automatically (from config.xml): the Cordova “id”, app version, description and android-versionCode. This is for convenience so you’ll be able to have a single point where, for example, you change the version of your app, not multiple files that you need to simultaneously touch which is error prone.

要确定上述每个属性的值，Quasar CLI 如下：

¥For determining the values for each of the properties mentioned above, Quasar CLI:

在 /quasar.config 文件中查找 “cordova” 对象。它是否支持 “version”、“description” 和/或 “androidVersionCode”？如果是，它将使用它们。
¥Looks in the /quasar.config file for a “cordova” Object. Does it have “version”, “description” and/or “androidVersionCode”? If yes, it will use them.
如果不是，它会在你的 /package.json 中查找 “cordovaId”、“version” 和 “description” 字段。
¥If not, then it looks into your /package.json for “cordovaId”, “version” and “description” fields.

cordova: {
  /** 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;

  /**

   * 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[];

  /**

   * 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;
}

你可以配置的其他选项：

¥Other options you can configure:

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 目录下的 Vite UI 配置：

¥Should you want to tamper with the Vite config for UI in /src:

export default defineConfig((ctx) => {
  return {
    build: {
      extendViteConf (viteConf) {
        if (ctx.mode.cordova) {
          // do something with viteConf
          // or return an object to deeply merge with current viteConf
        }
      }
    }
  }
})

1. Introduction

2. config.xml(config.xml)

3. quasar.config 文件(quasar.config file)