配置 Cordova | Quasar Framework

Quasar CLI with Vite - @quasar/app-vite

配置 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 - 是否处于 debug 模式
   * @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 - 是否处于 debug 模式
   * @param context.target - 目标平台（ios/android）
   * @returns string | string[] | undefined -（相对于 /src-cordova 的路径）
   *
   * @default ios: platforms/ios/build/... 和 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 的 Vite 配置：

export default defineConfig((ctx) => {
  return {
    build: {
      extendViteConf(viteConf) {
        if (ctx.mode.cordova) {
          // 对 viteConf 进行修改
          // 或者返回一个对象来深度合并到当前的 viteConf
        }
      },
    },
  };
});

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

1. Introduction

2. config.xml

3. quasar.config 文件