配置 Capacitor | Quasar Framework

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 file

在 /quasar.config 文件中，有两个地方可以为 Capacitor 配置 Quasar 的具体功能。

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;
  }
}

还可以这样配置：

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

最后，还可以禁用或配置返回按钮 hook（用于对话框）：

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 的 Webpack 配置，有两种方式：

build: {
  extendWebpack(webpackCfg) { ... },
  chainWebpack(webpackChain) { ... }
}

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

1. Introduction

2. capacitor.config.json

3. quasar.config file