Конфигурационные файлы quasar.config.js

Файл quasar.config.js является центральным элементом конфигурации проекта на Quasar Framework. Он управляет всеми аспектами сборки, интеграцией плагинов, настройкой роутера, темизации и оптимизацией приложения. Этот файл создается автоматически при инициализации проекта через CLI Quasar и имеет формат JavaScript-модуля с экспортом объекта конфигурации.

module.exports = configure(function (ctx) {
  return {
    // Конфигурация здесь
  }
});

Функция configure принимает контекст ctx, который содержит информацию о текущей среде сборки (dev, prod, SSR и т.д.), что позволяет задавать условные настройки для разных режимов.

Настройка сборки и сборщиков

Определение сборщика

Quasar поддерживает разные сборщики (Webpack, Vite). В quasar.config.js указывается, какой инструмент используется, и задаются его параметры:

build: {
  vueRouterMode: 'history', // Возможные значения: 'hash' или 'history'
  publicPath: '/',
  env: {
    API_URL: ctx.dev ? 'http://localhost:3000' : 'https://api.example.com'
  },
  vueOptions: {
    devtools: ctx.dev
  },
  chainWebpack (chain) {
    chain.plugin('define').tap(args => {
      args[0]['process.env'].CUSTOM_VARIABLE = JSON.stringify('value')
      return args
    })
  }
}

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

  • vueRouterMode определяет способ работы маршрутизатора.
  • publicPath управляет базовым URL для всех ресурсов приложения.
  • env позволяет создавать переменные окружения для dev/prod.
  • chainWebpack — расширение конфигурации Webpack для добавления плагинов или изменения правил сборки.

Настройка интерфейса и темы

Quasar использует систему тем и иконок, которую можно детально настраивать через quasar.config.js:

framework: {
  config: {
    brand: {
      primary: '#1976D2',
      secondary: '#26A69A',
      accent: '#9C27B0',
      dark: '#1d1d1d'
    },
    notify: { position: 'top-right', timeout: 3000 }
  },
  iconSet: 'material-icons',
  lang: 'ru'
}

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

  • brand задает глобальные цвета приложения.
  • notify конфигурирует уведомления (позиция, таймаут, цвет).
  • iconSet определяет набор иконок, который будет использоваться компонентами.
  • lang выбирает язык интерфейса Quasar-компонентов.

Плагины Quasar

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

plugins: [
  'Dialog',
  'Notify',
  'Loading'
]

Каждый плагин имеет свои настройки через объект framework.config. Например, плагин Dialog можно глобально настраивать:

framework: {
  config: {
    dialog: { ok: 'Да', cancel: 'Отмена', persistent: true }
  }
}

Настройка PWA, SSR и Capacitor

quasar.config.js поддерживает расширенные режимы сборки:

  • PWA — Progressive Web App:
pwa: {
  workboxPluginMode: 'GenerateSW',
  manifest: {
    name: 'MyApp',
    short_name: 'App',
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#1976D2',
    icons: [
      { src: 'icons/icon-128x128.png', sizes: '128x128', type: 'image/png' },
      { src: 'icons/icon-512x512.png', sizes: '512x512', type: 'image/png' }
    ]
  }
}
  • SSR — Server-Side Rendering:
ssr: {
  pwa: false,
  prodPort: 3000,
  maxAge: 1000 * 60 * 60 * 24
}
  • Capacitor и Cordova — мобильные сборки:
capacitor: {
  hideSplashscreen: true
}

Эти разделы позволяют задавать специфические настройки для каждой платформы без изменения исходного кода компонентов.

Расширенные возможности

Сборка CSS и стилевых ресурсов

css: [
  'app.scss'
],
preFetch: true
  • css подключает глобальные стили.
  • preFetch включает возможность предварительной загрузки данных в компонентах для SSR.

Настройка DevServer

devServer: {
  https: false,
  port: 8080,
  open: true,
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}
  • proxy перенаправляет запросы на backend-сервер.
  • open автоматически запускает браузер при старте сервера.

Использование контекста ctx

ctx позволяет гибко управлять конфигурацией для разных сред:

build: {
  minify: ctx.prod,
  sourcemap: ctx.dev
}
  • ctx.dev — режим разработки.
  • ctx.prod — продакшн-сборка.
  • ctx.mode.ssr — активен SSR.
  • ctx.mode.pwa — активен PWA.

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

Файл quasar.config.js является ядром управления проектом, где объединяются все настройки сборки, темы, плагинов и специфичных режимов. Правильное и подробное понимание каждой секции позволяет создавать быстрые, оптимизированные и масштабируемые приложения на Quasar Framework.

Оглавление