Developer

Структура проекта и quasar.config

↑ 5.3 Quasar · ← Предыдущая · → Следующая

Обязательно~4 мин чтенияУровень: middle

Зачем это на собесе

Как организован проект Quasar и что настраивается в quasar.config.

Объяснение

src/
  assets/            статические ресурсы (обрабатываются сборкой)
  boot/              boot-файлы (инициализация приложения)
  components/        общие компоненты
  css/               app.scss, quasar.variables.scss
  layouts/           MainLayout.vue, AuthLayout.vue
  pages/             страницы (маршруты)
  router/            index.ts, routes.ts
  stores/            Pinia
  i18n/              переводы
public/              статика без обработки (favicon)
quasar.config.ts     основной конфиг
src-pwa/, src-electron/, src-capacitor/, src-ssr/   режимы
// quasar.config.ts
export default defineConfig((ctx) => ({
  boot: ["i18n", "axios", "auth"],
  css: ["app.scss"],
  extras: ["roboto-font", "material-icons"],
  build: {
    target: { browser: ["es2022", "chrome110"] },
    vueRouterMode: "history",                    // hash | history
    publicPath: "/",
    env: { API_URL: process.env.API_URL },       // process.env.* и import.meta.env
    extendViteConf(cfg) { /* доп. настройки Vite */ },
    vitePlugins: "vite-plugin-checker", { vueTsc: true },
  },
  devServer: { port: 9000, proxy: { "/api": { target: "http://localhost:5000", changeOrigin: true } } },
  framework: {
    config: { dark: "auto", brand: { primary: "#1976d2" } },
    plugins: ["Notify", "Dialog", "Loading", "LocalStorage"],
    iconSet: "material-icons", lang: "ru",
  },
  animations: [],
  ssr: {}, pwa: { workboxMode: "GenerateSW" },
}));

Основные секции: boot, css, extras, build, devServer, framework (плагины, конфиг, язык), animations, sourceFiles, htmlVariables, настройки режимов.

Переменные окружения: .env, .env.production; передача через build.env; import.meta.env в коде.

Маршруты и страницы: routes.ts подключает layout и страницы (component: () => import(...)).

Нюансы и подводные камни

  • Изменения quasar.config требуют перезапуска dev-сервера.
  • Не храните секреты в build.env: они попадают в бандл.
  • Плагины Quasar нужно перечислить в framework.plugins, иначе они недоступны.
  • vueRouterMode: "history" требует fallback на сервере.
  • Прокси devServer действует только в разработке.

Практика

  1. Настройте прокси /api и переменные окружения.
  2. Добавьте плагины Notify и Dialog в конфиг.
  3. Подключите проверку типов при сборке.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки