Сборка для разных платформ

Библиотека Quasar предоставляет единый фреймворк для разработки приложений, которые могут запускаться в вебе, на мобильных устройствах через Cordova или Capacitor, а также как Electron-приложения для настольных систем. Основная идея — один кодовый базис, адаптируемый под конкретную платформу.

Конфигурация проекта для разных платформ

Файл quasar.conf.js играет ключевую роль в управлении сборкой. Он содержит секции build, devServer, framework и платформоспецифические настройки. Основные параметры, влияющие на мультиплатформенность:

  • build.target — указывает целевые браузеры для веб-сборки, что важно для корректной работы на мобильных устройствах.
  • build.env — переменные окружения, позволяющие задавать разные настройки для веба, мобильных и десктопных сборок.
  • cordova и capacitor — секции с путями, настройками пакетов и версиями SDK для мобильных платформ.
  • electron — настройки для сборки десктопного приложения, включая packager или builder и параметры установки.

Пример минимальной конфигурации для мультиплатформенной сборки:

build: {
  target: {
    browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13']
  },
  env: {
    API_URL: process.env.API_URL
  }
},
cordova: {
  id: 'com.example.app',
  iosStatusBarPadding: true
},
capacitor: {
  hideSplashscreen: true
},
electron: {
  bundler: 'builder',
  builder: {
    appId: 'com.example.desktopapp'
  }
}

Веб-сборка

Для веб-приложений Quasar использует стандартный Webpack под капотом. Основные моменты:

  • Оптимизация и минификация — автоматически применяются для production.
  • Lazy-loading компонентов — позволяет сократить размер начальной загрузки.
  • PWA — поддержка прогрессивных веб-приложений с конфигурированием service-worker, кешированием и offline-режимом.
  • SSR (Server-Side Rendering) — Quasar позволяет строить приложения с рендерингом на сервере для SEO и быстрой загрузки.

Команды:

quasar build -m spa      # веб-приложение SPA
quasar build -m pwa      # веб-приложение PWA
quasar build -m ssr      # серверный рендеринг

Мобильные платформы (Cordova и Capacitor)

Quasar поддерживает оба популярных инструмента для мобильных приложений:

  • Cordova — классический подход, добавляет нативные плагины через cordova plugin add.
  • Capacitor — более современный, интеграция с современными SDK, позволяет работать напрямую с iOS и Android проектами в Xcode и Android Studio.

Ключевые моменты:

  • Все мобильные сборки используют один и тот же Vue-код.
  • Настройка splash screen, разрешений и иконок осуществляется через capacitor.config.json или config.xml для Cordova.
  • Разделение платформ позволяет использовать специфичные для iOS/Android плагины через условные импорты.

Примеры команд:

quasar build -m capacitor -T android
quasar build -m capacitor -T ios
quasar build -m cordova -T android
quasar build -m cordova -T ios

Desktop (Electron)

Quasar упрощает создание кроссплатформенных десктопных приложений:

  • Поддерживаются Windows, macOS, Linux.
  • Можно выбирать между двумя сборщиками: electron-packager и electron-builder.
  • Настройка иконок, автозапуска, лицензий и установщика происходит через секцию electron.builder.
  • Полная интеграция с Vue-компонентами и Quasar UI без необходимости отдельной адаптации.

Пример сборки Electron:

quasar build -m electron

Особенности:

  • Разделение main и renderer процессов.
  • Использование Node.js API в main-процессе.
  • Поддержка hot-reload в режиме разработки для renderer.

Условные импорты и платформоспецифичный код

Quasar позволяет различать код для веба, мобильных и десктопных сборок с помощью:

import { Platform } from 'quasar'

if (Platform.is.cordova) {
  // код только для мобильных
}

if (Platform.is.electron) {
  // код только для десктопа
}

if (Platform.is.desktop) {
  // код для веба на ПК
}

Это позволяет минимизировать дублирование и держать базу кода чистой.

Управление ресурсами

  • Иконки и splash screen — Quasar автоматически подставляет изображения нужного размера для каждой платформы.
  • Ассеты — можно использовать условные папки src-cordova, src-electron, src-capacitor для хранения специфичных файлов.
  • Тема и CSS — глобальные стили работают на всех платформах, но Quasar позволяет подключать platform-specific переменные через cssAddon или scss.

Автоматизация и CI/CD

Quasar совместим с любыми CI/CD пайплайнами:

  • Поддержка сборки в Docker-контейнерах.
  • Автоматическое создание apk, ipa и установщиков для Windows/macOS/Linux.
  • Настройка quasar.conf.js через переменные окружения позволяет переключать платформы без изменения кода.

Quasar обеспечивает мощный инструмент для мультиплатформенной разработки, позволяя одной кодовой базе покрывать веб, мобильные и десктопные приложения с минимальными усилиями и высокой степенью контроля над сборкой и оптимизацией.

Оглавление