配置 Capacitor | Quasar 框架

Quasar CLI with Vite - @quasar/app-vite

配置 Capacitor

我们将使用 Quasar CLI 来开发和构建移动应用程序。构建 SPA、PWA、Electron 应用程序或移动应用程序之间的差异仅仅由 “quasar dev” 和 “quasar build” 命令中的 “mode” 参数决定。

您的移动应用程序有两个非常重要的配置文件。我们将逐一介绍。

capacitor.config.json

您移动应用程序最重要的配置文件是 /src-capacitor/capacitor.config.json。 /src-capacitor 文件夹是一个 Capacitor 项目，因此请参考 Capacitor 文档以了解那里每个文件的作用。但现在，请花点时间阅读有关 capacitor.config.json 的内容。

此文件中的某些属性将在下一节中被覆盖。

quasar.config 文件

在 /quasar.config 文件中，您可以配置两个地方以使用 Quasar 特定功能来使用 Capacitor。

return {
  capacitor: {
    // (Optional!)
    hideSplashscreen: false, // disables auto-hiding the Splashscreen by Quasar CLI

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

    // (Optional) If not present, will look for package.json > name
    appName: '...', // string
    // (Optional) If not present, will look for package.json > version
    version: '...', // string
    // (Optional) If not present, will look for package.json > description
    description: '...', // string
  }
}

您还可以配置

return {
  framework: {
    config: {
      capacitor: {
        iosStatusBarPadding: true/false, // add the dynamic top padding on iOS mobile devices
      }
    }
  }
}

最后，您还可以禁用或配置后退按钮挂钩（用于对话框）

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 中 UI 的 Vite 配置

module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf) {
        if (ctx.mode.capacitor) {
          // do something with ViteConf
        }
      }
    }
  }
}

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

1. 简介

2. capacitor.config.json

3. quasar.config 文件