Quasar CLI with Webpack - @quasar/app-webpack

配置 Capacitor

使用 Quasar CLI 来开发和构建一个移动应用程序。构建 SPA、PWA、Electron App 或移动 App 之间的区别只是由 “quasar dev” 和 “quasar build” 命令中的 “mode” 参数决定。

有两个配置文件对移动应用程序非常重要。接下来将逐一介绍。

capacitor.config.json

对移动应用程序来说,最重要的配置文件是 /src-capacitor/capacitor.config.json/src-capacitor 文件夹是一个 Capacitor 项目,所以请参考 Capacitor 文档 来了解其中每个文件的作用。但现在,请花点时间阅读一下 capacitor.config.json 内容。

这个文件的一些属性将被覆盖,下面会有提到。

quasar.config.js

/quasar.config.js 中,有两个地方可以为 Capacitor 配置 Quasar 的具体功能。

return {
  capacitor: {
    // (可选!)
    hideSplashscreen: false, // 禁用 Quasar CLI 的自动隐藏闪屏功能

    // (可选!)
    capacitorCliPreparationParams: [ 'sync', ctx.targetName ],

    // (可选) 如果不存在,会使用 package.json 中的 name 字段
    appName: '...', // string
    // (可选) 如果不存在,会使用 package.json 中的 version 字段
    version: '...', // string
    // (可选) 如果不存在,会使用 package.json 中的 description 字段
    description: '...', // string
  }
}

还可以这样配置:

return {
  framework: {
    config: {
      capacitor: {
        iosStatusBarPadding: true/false, // 在 iOS 移动设备上添加动态顶部填充物
      }
    }
  }
}

最后,还可以禁用或配置返回按钮 hook(用于对话框):

return {
  framework: {
    config: {
      capacitor: {
        // Quasar 处理应用退出的后退按钮。
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // 另一方面,以下是完全禁用 Quasar 的返回按钮管理。
        backButton: true/false
      }
    }
  }
}