Skip to main content

Vue i18n: kompletno podešavanje internacionalizacije pomoću vue-i18n

Od instalacije do produkcije: podesite vue-i18n pomoću Composition API sistema, obradite množine CLDR pravilima, koristite interpolaciju komponenti i dodajte pametne lance rezervnih lokala.

1

Instalirajte vue-i18n

vue-i18n je zvanični dodatak za Vue.js internacionalizaciju. Pruža reaktivne prevode, množinu u ICU stilu, interpolaciju komponenti, formatiranje datuma i brojeva i podršku za Options API i Composition API.

Terminal
npm install vue-i18n@9
2

Podesite vue-i18n

Napravite i18n instancu pomoću createI18n() i registrujte je kao Vue dodatak. Definišite poruke lokala, postavite podrazumevani i rezervni lokal. vue-i18n podržava i legacy (Options API) i composition (Composition API) režim.

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')
Ako vidite greške 'Not available in legacy mode', mešate i18n pozive sistema Composition API (useI18n()) sa konfiguracijom legacy režima. Postavite legacy: false u createI18n() da koristite Composition API režim ili dosledno koristite sintaksu $t() sistema Options API.
3

Koristite prevode u šablonima

vue-i18n pruža funkciju $t() u šablonima (Options API) i funkciju t() iz useI18n() (Composition API). Obe prihvataju ključ prevoda i neobavezne imenovane parametre ili parametre liste za interpolaciju.

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

Obradite množinu

vue-i18n podržava množinu preko oblika razdvojenih vertikalnom crtom i funkcije $tc() (legacy) ili t() sa parametrom broja (Composition API). Definišite oblike množine u porukama lokala pomoću vertikalne crte: '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>
Sintaksa množine razdvojene vertikalnom crtom podržava samo kardinalne množine sa najviše tri oblika (zero | one | other). Za jezike sa složenim CLDR pravilima množine (arapski, ruski, poljski) koristite ICU MessageFormat sintaksu ili modifikator @.plural sa izričitim mapiranjem CLDR kategorija.
5

Dodajte lance rezervnih lokala

Ugrađeni fallbackLocale sistema vue-i18n podržava samo ravnu listu rezervnih lokala, a ne lance po lokalu. Korisnik lokala pt-BR sa nedostajućim ključem prelazi na engleski umesto na pt-PT. vue-i18n-locale-chain dodaje podesive lance sa dubinskim spajanjem kako bi regionalni korisnici uvek videli najbliži dostupan prevod.

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 dubinski spaja poruke tokom učitavanja. Reaktivni sistem vue-i18n kešira spojeni skup poruka, pa pretrage rezerve ne umanjuju performanse tokom izvršavanja.
6

Automatizujte prevode

Kada podesite vue-i18n, prevedite JSON datoteke lokala pomoću AI tehnologije. U IDE okruženju zatražite od AI pomoćnika da prevede izvornu datoteku ili integrišite prevođenje u CI/CD pipeline za potpuno automatizovanu lokalizaciju.

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

Konfiguracija lanca rezervnih lokala

Podesite lance rezerve po lokalu kako bi regionalni korisnici videli najbliži dostupan prevod umesto da odmah pređu na engleski. vue-i18n podržava fallbackLocale u obliku objekta za definisanje lanaca po lokalu.

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': { /* ... */ },
  },
})
Objekat fallbackLocale Vam omogućava da definišete različite lance za različite lokale. Korisnik lokala pt-BR prelazi na pt, pa en, dok korisnik lokala zh-Hant-TW prelazi na zh-Hant, zatim zh i en.

Uobičajene zamke

Mešanje legacy i Composition API režima

Upotreba useI18n() sa legacy: true (podrazumevano) izaziva greške. Postavite legacy: false u createI18n() ako koristite Composition API ili se držite $t() u šablonima sa Options API sistemom. Nemojte mešati oba režima u istoj aplikaciji.

Upotreba v-html za prevedene tekstove

Upotreba v-html za prikazivanje prevoda koji sadrže HTML predstavlja XSS rizik ako vrednosti interpolacije dolaze iz korisničkog unosa. Koristite komponentu &lt;i18n-t&gt; za prevode sa ugrađenim HTML ili Vue komponentama — podrazumevano je bezbedna i podržava reaktivno ugrađivanje komponenti.

Regionalni korisnici vide engleski umesto nadređenog lokala

fallbackLocale sistema vue-i18n je ravna lista, a ne lanac po lokalu. pt-BR prelazi na ono što je u listi (obično 'en') i potpuno preskače pt-PT. Koristite vue-i18n-locale-chain da dodate ispravnu regionalnu rezervu sa dubinskim spajanjem.

Isprobajte i18n Agent sada

Pustite datoteku za prevođenje ovde

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

ili kliknite za izbor

Ciljni jezici

Registracija nije potrebnaTrenutna procena

Česta pitanja o Vue i18n sistemu