Настройка Electron режима

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

Установка Electron режима

Для добавления поддержки Electron используется команда:

quasar mode add electron

Эта команда выполняет несколько задач:

  • Создает директорию src-electron с исходными файлами main и preload скриптов.
  • Обновляет quasar.conf.js, добавляя объект electron с настройками сборки.
  • Устанавливает необходимые зависимости (electron, electron-packager или electron-builder).

После выполнения команды проект готов к запуску Electron приложения.

Основные файлы и структура

После добавления режима Electron структура проекта содержит:

src-electron/
 ├── main-process/
 │    └── index.js      // главный процесс приложения
 ├── preload/
 │    └── index.js      // скрипты preload для безопасного взаимодействия с рендерером
quasar.conf.js          // конфигурация сборки

Главный процесс (main-process/index.js) отвечает за создание окон, обработку системных событий и интеграцию с нативными API.

Preload скрипт служит мостом между главным процессом и рендерером, предоставляя безопасный API через contextBridge.

Настройка quasar.conf.js для Electron

В файле quasar.conf.js раздел electron позволяет гибко настраивать поведение приложения:

electron: {
  bundler: 'builder', // 'packager' или 'builder'
  packager: {
    platform: 'win32',
    arch: 'x64',
    icon: 'src-electron/icons/icon.ico'
  },
  builder: {
    appId: 'com.example.app',
    win: {
      target: ['nsis']
    },
    mac: {
      target: ['dmg']
    },
    linux: {
      target: ['AppImage']
    }
  },
  nodeIntegration: false,
  extendWebpack(cfg) {
    // добавление собственных правил или плагинов Webpack
  }
}

Ключевые параметры:

  • bundler — выбор сборщика (packager для простых сборок, builder для продакшн-пакетов с установщиками).
  • packager и builder — настройки платформы, архитектуры и иконок.
  • nodeIntegration — определяет возможность использовать Node.js API в рендерере. Для безопасности рекомендуется отключать (false) и использовать preload.
  • extendWebpack — позволяет модифицировать Webpack конфигурацию для Electron.

Главный процесс и создание окна

Главный процесс создается через класс BrowserWindow:

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  })

  win.loadURL(process.env.APP_URL)
}

app.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

Особенности настройки:

  • preload указывает на скрипт, который будет внедрен в рендерер перед загрузкой страницы.
  • contextIsolation: true обеспечивает безопасность, изолируя контекст рендерера от Node.js.
  • Использование process.env.APP_URL позволяет Quasar автоматически подставлять URL при разработке (http://localhost) и продакшн сборке (локальный файл).

Preload скрипт

Preload скрипт создает безопасный мост между рендерером и главным процессом:

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => ipcRenderer.send(channel, data),
  receive: (channel, callback) => ipcRenderer.on(channel, (event, args) => callback(args))
})

Использование contextBridge позволяет избежать прямого доступа к Node.js API из рендерера, что критически важно для безопасности.

Сборка и запуск

Для запуска приложения в режиме разработки:

quasar dev -m electron

Для продакшн сборки с установщиком:

quasar build -m electron

Если выбран builder, результатом будет готовый установщик для указанной платформы (.exe, .dmg, .AppImage).

Настройка автообновлений

Quasar поддерживает интеграцию с electron-updater:

const { autoUpdater } = require('electron-updater')

autoUpdater.checkForUpdatesAndNotify()

Важно вызывать этот метод после app.on('ready') и убедиться, что приложение имеет доступ к интернету для проверки обновлений.

Интеграция с Quasar компонентами

В рендерере Quasar компоненты работают так же, как в обычном SPA. Для взаимодействия с главным процессом используется API, созданное через preload:

// Внутри Vue компонента
this.$electron.send('log-event', { message: 'Приложение запущено' })
this.$electron.receive('update-status', (status) => {
  console.log('Статус обновления:', status)
})

Настройка иконок и ресурсов

Все иконки и ресурсы для Electron хранятся в src-electron/icons. Для Windows рекомендуется использовать .ico, для macOS .icns, для Linux .png.

Конфигурация в quasar.conf.js указывает пути к этим файлам, чтобы сборщик корректно подставлял иконки в установщики и системные окна.

Дополнительные возможности

  • Меню приложения: через Menu можно полностью кастомизировать верхнее меню.
  • Tray и уведомления: поддерживаются системные трей-иконки и уведомления.
  • Работа с файлами: встроенные модули fs и path доступны через preload, позволяя безопасно управлять файлами без прямого доступа к Node.js в рендерере.

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

Оглавление