Skip to main content

Vue i18n: комплетно подешавање интернационализације помоћу vue-i18n

Од инсталације до продукције: подесите vue-i18n помоћу Composition API система, обрадите множине CLDR правилима, користите интерполацију компоненти и додајте паметне ланце резервних локала.

1

Инсталирајте vue-i18n

vue-i18n је званични додатак за Vue.js интернационализацију. Пружа реактивне преводе, множину у ICU стилу, интерполацију компоненти, форматирање датума и бројева и подршку за Options API и Composition API.

Terminal
npm install vue-i18n@9
2

Подесите vue-i18n

Направите i18n инстанцу помоћу createI18n() и региструјте је као Vue додатак. Дефинишите поруке локала, поставите подразумевани и резервни локал. vue-i18n подржава и legacy (Options API) и composition (Composition API) режим.

src/i18n.ts
// src/i18n.ts
import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import de from './locales/de.json'

const i18n = createI18n({
  legacy: false,           // Use Composition API mode
  locale: 'en',            // Default locale
  fallbackLocale: 'en',   // Fallback locale
  messages: { en, de },
})

export default i18n
src/main.ts
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

const app = createApp(App)
app.use(i18n)
app.mount('#app')
Ако видите грешке 'Not available in legacy mode', мешате i18n позиве система Composition API (useI18n()) са конфигурацијом legacy режима. Поставите legacy: false у createI18n() да користите Composition API режим или доследно користите синтаксу $t() система Options API.
3

Користите преводе у шаблонима

vue-i18n пружа функцију $t() у шаблонима (Options API) и функцију t() из useI18n() (Composition API). Обе прихватају кључ превода и необавезне именоване параметре или параметре листе за интерполацију.

src/locales/en.json
// src/locales/en.json
{
  "nav": {
    "home": "Home",
    "about": "About",
    "settings": "Settings"
  },
  "greeting": "Hello, {name}!",
  "cart": {
    "itemCount": "no items | one item | {count} items"
  }
}

// src/locales/de.json
{
  "nav": {
    "home": "Startseite",
    "about": "Über uns",
    "settings": "Einstellungen"
  },
  "greeting": "Hallo, {name}!",
  "cart": {
    "itemCount": "keine Artikel | ein Artikel | {count} Artikel"
  }
}
4

Обрадите множину

vue-i18n подржава множину преко облика раздвојених вертикалном цртом и функције $tc() (legacy) или t() са параметром броја (Composition API). Дефинишите облике множине у порукама локала помоћу вертикалне црте: 'no items | one item | {count} items'.

MyComponent.vue
<template>
  <div>
    <!-- Simple translation -->
    <h1>{{ $t('nav.home') }}</h1>

    <!-- With variables -->
    <p>{{ $t('greeting', { name: userName }) }}</p>

    <!-- In attributes -->
    <input :placeholder="$t('nav.settings')" />

    <!-- Composition API -->
    <p>{{ greeting }}</p>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const userName = 'Alice'
const greeting = t('greeting', { name: userName })
</script>
Синтакса множине раздвојене вертикалном цртом подржава само кардиналне множине са највише три облика (zero | one | other). За језике са сложеним CLDR правилима множине (арапски, руски, пољски) користите ICU MessageFormat синтаксу или модификатор @.plural са изричитим мапирањем CLDR категорија.
5

Додајте ланце резервних локала

Уграђени fallbackLocale система vue-i18n подржава само равну листу резервних локала, а не ланце по локалу. Корисник локала pt-BR са недостајућим кључем прелази на енглески уместо на pt-PT. vue-i18n-locale-chain додаје подесиве ланце са дубинским спајањем како би регионални корисници увек видели најближи доступан превод.

Plurals.vue
<template>
  <div>
    <!-- Pipe-separated plurals -->
    <p>{{ $t('cart.itemCount', count) }}</p>

    <!-- Named plurals (recommended for complex languages) -->
    <p>{{ $t('orders', { n: orderCount }) }}</p>
  </div>
</template>

<!-- In your locale file: -->
<!-- "orders": "{n} order | {n} orders" -->
vue-i18n-locale-chain дубински спаја поруке током учитавања. Реактивни систем vue-i18n кешира спојени скуп порука, па претраге резерве не умањују перформансе током извршавања.
6

Аутоматизујте преводе

Када подесите vue-i18n, преведите JSON датотеке локала помоћу AI технологије. У IDE окружењу затражите од AI помоћника да преведе изворну датотеку или интегришите превођење у CI/CD pipeline за потпуно аутоматизовану локализацију.

LanguageSwitcher.vue
<template>
  <select v-model="locale">
    <option v-for="lang in availableLocales" :key="lang" :value="lang">
      {{ lang }}
    </option>
  </select>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale, availableLocales } = useI18n()
</script>
src/i18n.ts (lazy loading)
// src/i18n.ts
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: {},
})

export async function loadLocale(locale: string) {
  const messages = await import(`./locales/${locale}.json`)
  i18n.global.setLocaleMessage(locale, messages.default)
  i18n.global.locale.value = locale
}

export default i18n
7

Конфигурација ланца резервних локала

Подесите ланце резерве по локалу како би регионални корисници видели најближи доступан превод уместо да одмах пређу на енглески. vue-i18n подржава fallbackLocale у облику објекта за дефинисање ланаца по локалу.

src/i18n.ts
// src/i18n.ts
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,
  locale: 'pt-BR',
  fallbackLocale: {
    'pt-BR': ['pt', 'en'],
    'zh-Hant-TW': ['zh-Hant', 'zh', 'en'],
    'es-419': ['es', 'en'],
    default: ['en'],
  },
  messages: {
    en: { /* ... */ },
    pt: { /* ... */ },
    'pt-BR': { /* ... */ },
  },
})
Објекат fallbackLocale Вам омогућава да дефинишете различите ланце за различите локале. Корисник локала pt-BR прелази на pt, па en, док корисник локала zh-Hant-TW прелази на zh-Hant, затим zh и en.

Уобичајене замке

Мешање legacy и Composition API режима

Употреба useI18n() са legacy: true (подразумевано) изазива грешке. Поставите legacy: false у createI18n() ако користите Composition API или се држите $t() у шаблонима са Options API системом. Немојте мешати оба режима у истој апликацији.

Употреба v-html за преведене текстове

Употреба v-html за приказивање превода који садрже HTML представља XSS ризик ако вредности интерполације долазе из корисничког уноса. Користите компоненту &lt;i18n-t&gt; за преводе са уграђеним HTML или Vue компонентама — подразумевано је безбедна и подржава реактивно уграђивање компоненти.

Регионални корисници виде енглески уместо надређеног локала

fallbackLocale система vue-i18n је равна листа, а не ланац по локалу. pt-BR прелази на оно што је у листи (обично 'en') и потпуно прескаче pt-PT. Користите vue-i18n-locale-chain да додате исправну регионалну резерву са дубинским спајањем.

Испробајте i18n Agent сада

Пустите датотеку за превођење овде

JSON, YAML, PO, XML, CSV, Markdown, Properties

или кликните за избор

Циљни језици

Регистрација није потребнаТренутна процена

Честа питања о Vue i18n систему