Структура файлов локализации

В Quasar Framework локализация играет ключевую роль при разработке многоязычных приложений. Поддержка разных языков достигается за счёт интеграции с vue-i18n, которая позволяет организовывать переводы в отдельные файлы, управлять динамическими сообщениями и эффективно масштабировать проект.

Основные принципы организации файлов

Файлы локализации в Quasar располагаются в папке src/i18n/ или любой другой, указанной в конфигурации проекта. Каждый язык представляется отдельным файлом в формате JavaScript или JSON. Общепринятые соглашения:

  • Название файла соответствует коду языка, например:

    • en-us.js — английский (США)
    • ru-ru.js — русский
    • fr-fr.js — французский

  • Файлы экспортируют объект с ключами и значениями:

export default {
  greeting: "Привет",
  farewell: "До свидания",
  menu: {
    home: "Главная",
    about: "О нас"
  }
}
  • Вложенные объекты (menu в примере выше) позволяют структурировать переводы по разделам приложения, что облегчает поддержку больших проектов.

Инициализация i18n в Quasar

Для интеграции переводов создается отдельный модуль i18n.js:

import { createI18n } from 'vue-i18n'

import enUS from './en-us'
import ruRU from './ru-ru'

const messages = {
  'en-US': enUS,
  'ru-RU': ruRU
}

const i18n = createI18n({
  locale: 'ru-RU',
  fallbackLocale: 'en-US',
  messages
})

export default i18n

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

  • locale — текущий язык приложения.
  • fallbackLocale — язык по умолчанию, если перевод для текущего языка отсутствует.
  • messages — объект с импортированными файлами локализации.

Динамическая загрузка переводов

Для оптимизации больших приложений Quasar поддерживает ленивую загрузку языковых пакетов. Это позволяет загружать перевод только при необходимости:

const loadLocale = async (locale) => {
  const messages = await import(`./${locale}.js`)
  i18n.global.setLocaleMessage(locale, messages.default)
  i18n.global.locale.value = locale
}
  • import() динамически загружает файл перевода.
  • setLocaleMessage обновляет сообщения для указанного языка.
  • Можно реализовать переключение языка без перезагрузки страницы.

Структура вложенных переводов

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

i18n/
├─ en-us/
│  ├─ common.js
│  ├─ menu.js
│  └─ forms.js
├─ ru-ru/
│  ├─ common.js
│  ├─ menu.js
│  └─ forms.js
  • Каждый файл отвечает за отдельный функциональный блок.
  • Общий объект объединяется при инициализации:
import { createI18n } from 'vue-i18n'
import enCommon from './en-us/common'
import enMenu from './en-us/menu'
import ruCommon from './ru-ru/common'
import ruMenu from './ru-ru/menu'

const messages = {
  'en-US': { ...enCommon, ...enMenu },
  'ru-RU': { ...ruCommon, ...ruMenu }
}

export default createI18n({ locale: 'ru-RU', messages })

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

Quasar с vue-i18n позволяет обращаться к переводам через:

<template>
  <q-btn :label="$t('menu.home')" />
</template>
  • $t('ключ') — основной метод для получения перевода.
  • Поддерживаются плейсхолдеры и параметры:
export default {
  welcome: 'Добро пожаловать, {name}!'
}
<p>{{ $t('welcome', { name: 'Иван' }) }}</p>

Поддержка форматов чисел, валют и дат

vue-i18n в Quasar позволяет использовать форматирование чисел и дат в соответствии с локалью:

const number = 123456.78

<p>{{ $n(number, 'currency') }}</p>

Конфигурация форматов выполняется при создании i18n:

const i18n = createI18n({
  locale: 'ru-RU',
  numberFormats: {
    'ru-RU': { currency: { style: 'currency', currency: 'RUB' } }
  }
})

Практические рекомендации

  • Разделять переводы по модулям для упрощения поддержки.
  • Использовать динамическую подгрузку языков при масштабировании.
  • Следить за консистентностью ключей между языками.
  • Вложенные объекты помогают логически группировать строки интерфейса.
  • Плейсхолдеры и параметры делают переводы гибкими и повторно используемыми.

Структура файлов локализации в Quasar обеспечивает удобное масштабирование и поддержку многоязычных интерфейсов. Четкое разделение на модули и стандартизация ключей ускоряют разработку и делают проект более управляемым.

Оглавление