Quasar CLI with Webpack - @quasar/app-webpack
我们将使用 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-webpack v3.12.8+)
*
* 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-webpack v3.12.8+)
*
* 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;
}
content_paste
您可以配置的其他选项
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
}
}
}
}
content_paste