設定 Capacitor | Quasar Framework

Quasar CLI 搭配 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 檔案中有兩個地方可以為 Capacitor 配置 Quasar 特定的功能。

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

最後，您還可以停用或配置返回按鈕 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 的 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 檔案