我们将使用 Quasar CLI 开发和构建一个移动应用。构建 SPA、PWA、Electron 应用或移动应用之间的区别仅仅取决于 “quasar dev” 和 “quasar 构建” 命令中的 “mode” 参数。
¥We’ll be using Quasar 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.
capacitor.config.json(capacitor.config.json)
移动应用最重要的配置文件也是 /src-capacitor/capacitor.config.json。/src-capacitor 文件夹是一个 Capacitor 项目，因此请参考 Capacitor 文档 以了解其中每个文件的功能。现在，请花点时间阅读一下 capacitor.config.json 的相关内容。
¥The most important config file for your mobile app is /src-capacitor/capacitor.config.json. The /src-capacitor folder is a Capacitor project, so please refer to Capacitor documentation in order to understand what each file from there does. But for now, have a few moments to read about capacitor.config.json.
此文件中的某些属性将被覆盖，我们将在下一节中看到。
¥Some properties from this file will get overwritten as we’ll see in next section.
quasar.config 文件(quasar.config file)
¥quasar.config file
/quasar.config 文件中有两个地方可以为 Capacitor 配置 Quasar 特定功能。
¥There are two places in the /quasar.config file where you can configure Quasar specific features for Capacitor.
return {
capacitor: {
/**
* Automatically hide the Capacitor Splashscreen when app is ready,
* (is using the Splashscreen Capacitor plugin).
* * @default true
*/
hideSplashscreen?: boolean;
/**
* Preparation params with which the Capacitor CLI is called
* * @default [ 'sync', ctx.targetName ]
*/
capacitorCliPreparationParams?: string[];
/** If not present, will look for `package.json > name` */
appName?: string;
/** If not present, will look for `package.json > version` */
version?: string;
/** If not present, will look for `package.json > description` */
description?: string;
}
}你还可以进行配置：
¥And you can also configure:
return {
framework: {
config: {
capacitor: {
iosStatusBarPadding: true/false, // add the dynamic top padding on iOS mobile devices
}
}
}
}最后，你还可以禁用或配置后退按钮钩子（用于对话框）：
¥Finally, you can also disable or configure the back button hook (used for Dialogs):
return {
framework: {
config: {
capacitor: {
// 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.capacitor) {
// do something with viteConf
// or return an object to deeply merge with current viteConf
}
}
}
}
})