Skip to main content

Vue i18n: configurare completă a internaționalizării cu vue-i18n

De la instalare până în producție: configurați vue-i18n cu Composition API, gestionați formele de plural cu regulile CLDR, folosiți interpolarea componentelor și adăugați lanțuri inteligente de rezervă pentru setările regionale.

1

Instalați vue-i18n

vue-i18n este extensia oficială de internaționalizare pentru Vue.js. Oferă traduceri reactive, pluralizare în stil ICU, interpolarea componentelor, formatarea datelor, orelor și numerelor, precum și compatibilitate cu Options API și Composition API.

Terminal
npm install vue-i18n@9
2

Configurați vue-i18n

Creați o instanță i18n cu createI18n() și înregistrați-o ca extensie Vue. Definiți mesajele de limbă, setați limba implicită și configurați limba de rezervă. vue-i18n acceptă atât modul vechi (Options API), cât și modul de compoziție (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')
Dacă vedeți erori 'Not available in legacy mode', combinați apeluri i18n din Composition API (useI18n()) cu o configurație pentru modul vechi. Setați legacy: false în createI18n() pentru a folosi modul Composition API sau utilizați consecvent sintaxa $t() din Options API.
3

Folosiți traducerile în șabloane

vue-i18n oferă funcția $t() în șabloane (Options API) și funcția t() din useI18n() (Composition API). Ambele acceptă cheia de traducere și parametri opționali denumiți sau de tip listă pentru interpolare.

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

Gestionați pluralizarea

vue-i18n acceptă pluralizarea prin forme separate cu bare verticale și funcția $tc() (modul vechi) sau t() cu un parametru numeric (Composition API). Definiți formele de plural în mesajele de limbă folosind separatorul bară verticală: '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>
Sintaxa de plural cu bare verticale acceptă numai plurale cardinale cu cel mult trei forme (zero | one | other). Pentru limbile cu reguli de plural CLDR complexe (arabă, rusă, polonă), folosiți sintaxa ICU MessageFormat sau modificatorul @.plural cu mapări explicite ale categoriilor CLDR.
5

Adăugați lanțuri de rezervă pentru setările regionale

fallbackLocale încorporat în vue-i18n acceptă numai o listă simplă de setări regionale de rezervă, nu lanțuri specifice fiecărei setări regionale. Un utilizator pt-BR căruia îi lipsește o cheie primește textul în engleză în locul celui în pt-PT. vue-i18n-locale-chain adaugă lanțuri configurabile cu îmbinare profundă, astfel încât utilizatorii regionali să vadă întotdeauna cea mai apropiată traducere disponibilă.

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 îmbină profund mesajele la încărcare. Setul de mesaje rezultat este memorat în cache de sistemul reactiv vue-i18n, astfel că operațiunile de căutare prin mecanismul de rezervă nu afectează performanța în timpul execuției.
6

Automatizați traducerile

După configurarea vue-i18n, traduceți fișierele JSON de limbă cu ajutorul IA. Din mediul IDE, solicitați-i asistentului IA să traducă fișierul-sursă sau integrați traducerea în fluxul CI/CD pentru o localizare complet automatizată.

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

Configurarea lanțurilor de rezervă pentru setările regionale

Configurați lanțuri de rezervă pentru fiecare limbă, astfel încât utilizatorii regionali să vadă cea mai apropiată traducere disponibilă în loc să treacă direct la engleză. vue-i18n acceptă forma de obiect a fallbackLocale pentru definirea lanțurilor fiecărei limbi.

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': { /* ... */ },
  },
})
Obiectul fallbackLocale vă permite să definiți lanțuri diferite pentru limbi diferite. Un utilizator pt-BR revine la pt și apoi la en, iar un utilizator zh-Hant-TW revine la zh-Hant, zh și apoi la en.

Capcane frecvente

Combinarea modurilor vechi și Composition API

Folosirea useI18n() cu legacy: true (valoarea implicită) provoacă erori. Setați legacy: false în createI18n() dacă folosiți Composition API sau limitați-vă la $t() în șabloanele cu Options API. Nu combinați cele două moduri în aceeași aplicație.

Folosirea v-html pentru șirurile traduse

Folosirea v-html pentru redarea traducerilor care conțin HTML prezintă un risc XSS dacă valorile interpolate provin din date introduse de utilizatori. Folosiți componenta &lt;i18n-t&gt; pentru traducerile cu HTML sau componente Vue încorporate: aceasta este sigură în mod implicit și permite încorporarea reactivă a componentelor.

Utilizatorii regionali văd engleza în locul limbii-părinte

fallbackLocale din vue-i18n este o listă simplă, nu un lanț pentru fiecare limbă. pt-BR revine la limba din listă (de obicei 'en'), omitând complet pt-PT. Folosiți vue-i18n-locale-chain pentru a adăuga un mecanism regional de rezervă adecvat, cu îmbinare profundă.

Încercați acum i18n Agent

Plasați aici fișierul de traducere

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

sau faceți clic pentru a-l selecta

Limbi țintă

Nu este necesară înregistrareaEstimare instantanee

Întrebări frecvente despre Vue i18n