配置 Cordova | Quasar Framework

Quasar CLI with Webpack - @quasar/app-webpack

配置 Cordova

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

有两个配置文件对您的移动 APP 非常重要。我们会逐一介绍。

config.xml

您的移动 APP 最重要的配置文件是 /src-cordova/config.xml。/src-cordova 文件夹是 Cordova 项目的源代码，所以请参考 Cordova 文档以了解每个文件的作用。但现在，请花一些时间阅读 config.xml。

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

quasar.config 配置文件

Quasar CLI 可帮助您自动设置移动 APP 的某些属性（从 config.xml 文件获取）：Cordova “id”、APP 版本(version)、说明(description）和 Android 系统的 versionCode。这样做是为了方便管理——您只需在一处修改 APP 的版本号等信息，而不必同时维护多个文件，避免出错。

Quasar CLI 按照以下顺序确定上述各属性的值：

首先在 /quasar.config 文件中查找 “cordova” 对象。其中是否包含 “version”、“description” 和/或 “androidVersionCode”？如果有，则直接使用。
如果没有，则查看 /package.json 中的 “cordovaId”、“version” 和 “description” 字段。

cordova: {
  /** 若未设置，将会查找 `package.json > version` */
  version?: string;
  /** 若未设置，将会查找 `package.json > description` */
  description?: string;
  androidVersionCode?: string;
  /**
   * 即使考虑到 iOS-Cordova 的兼容问题，也启用 Xcode modern build。
   * 如果您明确知道自己在做什么，可以将其开启，
   * 例如，您想在 "build.json" 文件中指定构建类型。
   *
   * @default false
   */
  noIosLegacyBuildFlag?: boolean;

  /**
   * 用于返回 Cordova 构建命令参数的函数，
   * 在 UI 编译完成后执行。
   *
   * @param context.debug - 为 true 表示处于调试模式
   * @param context.target - 目标平台 (ios/android)
   * @returns 字符串数组（命令参数）
   *
   * @default: [ 'build', '--debug'/'--release', '--device', 'ios'/'android' ]
   * @example: ({ isDebug, target }) => [ 'build', `--${isDebug ? 'debug' : 'release'}`, '--device', 'target' ]
   */
  getCordovaBuildParams?: (context: { debug: boolean; target: 'ios' | 'android' }) => string[];

  /**
   * 用于返回 "cordova build" 命令执行后 Cordova 输出目录的函数。
   * 返回的是相对于 /src-cordova 的路径，
   * 用于将 Cordova 的构建产物复制到 /dist 目录。
   *
   * @param context.debug - 为 true 表示处于调试模式
   * @param context.target - 目标平台 (ios/android)
   * @returns string | string[] | undefined -（相对于 /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: (当只关心某一个平台时，另一个平台使用默认值)
   *    ({ isDebug, target }) => {
   *       if (target === 'ios') {
   *          return `platforms/ios/build/${isDebug ? 'Debug' : 'Release'}-iphoneos`
   *       }
   *    }
   * @example: ()
   *    ({ isDebug, target }) => {
   *       if (target === 'ios') {
   *          // 尝试这两个目录
   *          return [ 'platforms/ios/build/device', 'platforms/ios/build/emulator' ]
   *       }
   *    }
   */
  getCordovaBuildOutputFolder?: (context: { debug: boolean; target: 'ios' | 'android' }) => string | string[] | undefined;
}

您可以配置的其他选项：

return {
  framework: {
    config: {
      cordova: {
        // 在 iOS 移动设备上添加动态的顶部填充(top padding)
        iosStatusBarPadding: true / false,

        // Quasar 处理手机的返回按钮是否退出应用
        backButtonExit: true / false / "*" / ["/login", "/home", "/my-page"],

        // 相反，下面的配置会完全禁用 Quasar 对返回按钮的管理
        backButton: true / false,
      },
    },
  },
};

如果您想自定义 /src 中 UI 部分的 Webpack 配置，有两种方式：

build: {
  extendWebpack(webpackCfg) { ... },
  chainWebpack(webpackChain) { ... }
}

发现错误？在浏览器中编辑此页

1. Introduction

2. config.xml

3. quasar.config 配置文件