配置 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
      }
    }
  }
}

如果想修改 /src 中 UI 的 Vite 配置：

// quasar.config.js
module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf) {
        if (ctx.mode.capacitor) {
          // 用 ViteConf 做一些事情
        }
      }
    }
  }
}