Skip to main content

Vue i18n: teljes nemzetköziesítési beállítás vue-i18n használatával

A telepítéstől az éles környezetig: állítsa be a vue-i18n csomagot Composition API-val, kezelje a többes számokat CLDR-szabályokkal, használjon komponensinterpolációt, és adjon intelligens területi tartalékláncokat.

1

A vue-i18n telepítése

A vue-i18n a Vue.js hivatalos nemzetköziesítési bővítménye. Reaktív fordításokat, ICU-stílusú többes számot, komponensinterpolációt, dátum- és számformázást, valamint Options API és Composition API támogatást kínál.

Terminal
npm install vue-i18n@9
2

A vue-i18n beállítása

Hozzon létre i18n-példányt createI18n() segítségével, és regisztrálja Vue-bővítményként. Határozza meg a területi üzeneteket, az alapértelmezett és tartalékterületet. A vue-i18n legacy (Options API) és composition (Composition API) módot is támogat.

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” hiba azt jelzi, hogy Composition API i18n hívásokat (useI18n()) kever legacy konfigurációval. Composition API-hoz állítson legacy: false értéket a createI18n() hívásban, vagy következetesen használja az Options API $t() szintaxisát.
3

Fordítások használata sablonokban

A vue-i18n sablonokban $t() függvényt (Options API), a useI18n() eredményéből t() függvényt (Composition API) biztosít. Mindkettő fordítási kulcsot és választható név-/listaparamétereket fogad interpolációhoz.

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

Többes szám kezelése

A vue-i18n csőjellel elválasztott alakokkal és a $tc() függvénnyel (legacy), illetve számmal hívott t() függvénnyel (Composition API) támogatja a többes számot. A területi üzenetekben csőjellel adja meg: '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>
A csőjeles szintaxis legfeljebb három kardinális alakot támogat (zero | one | other). Összetett CLDR-szabályú nyelvekhez (arab, orosz, lengyel) használjon ICU MessageFormat formátumot vagy @.plural módosítót kifejezett CLDR-kategóriatérképpel.
5

Területi tartalékláncok hozzáadása

A vue-i18n beépített fallbackLocale értéke csak lapos tartaléklistát, nem területenkénti láncot támogat. Egy hiányzó kulccsal találkozó pt-BR felhasználó pt-PT helyett angolra vált. A vue-i18n-locale-chain beállítható mély egyesítésű láncokat ad, így mindig a legközelebbi fordítás jelenik meg.

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" -->
A vue-i18n-locale-chain betöltéskor mélyen egyesíti az üzeneteket. Az egyesített készletet a vue-i18n reaktivitási rendszere gyorsítótárazza, ezért a tartalékkereséseknek nincs futásidejű teljesítményköltségük.
6

Fordítások automatizálása

A vue-i18n beállítása után fordítsa le a területi JSON-fájlokat mesterséges intelligenciával. Az IDE-ben kérje meg az MI-segédet a forrásfájl fordítására, vagy építse be a fordítást a CI/CD-folyamatba.

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

Területi tartaléklánc beállítása

Állítson be területenkénti láncokat, hogy a regionális felhasználók az angolra ugrás helyett a legközelebbi fordítást lássák. A vue-i18n objektumstílusú fallbackLocale értékkel támogat területenkénti láncokat.

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': { /* ... */ },
  },
})
A fallbackLocale objektum területenként eltérő láncot adhat meg. A pt-BR felhasználó pt, majd en, a zh-Hant-TW felhasználó zh-Hant, zh, majd en változatra vált.

Gyakori buktatók

Legacy és Composition API módok keverése

A useI18n() legacy: true (alapértelmezett) értékkel hibát okoz. Composition API-hoz állítson legacy: false értéket a createI18n() hívásban, vagy Options API-val maradjon a sablonok $t() hívásánál. Ne keverje a két módot egy alkalmazásban.

v-html használata lefordított karakterláncokhoz

A HTML-t tartalmazó fordítások v-html alapú renderelése XSS-kockázat, ha bármely interpolációs érték felhasználói bemenetből származik. Beágyazott HTML-t vagy Vue-komponenst tartalmazó fordításokhoz használjon &lt;i18n-t&gt; komponenst — alapból biztonságos és reaktív beágyazást támogat.

A regionális felhasználók a szülőterület helyett angol szöveget látnak

A vue-i18n fallbackLocale lapos lista, nem területenkénti lánc. A pt-BR a listában lévő értékre (általában „en”) vált, teljesen kihagyva a pt-PT változatot. Helyes, mély egyesítésű regionális tartalékhoz használja a vue-i18n-locale-chain csomagot.

Try i18n Agent Now

Drop your translation file here

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

or click to browse

Target languages

No signup requiredInstant estimate

Vue i18n – gyakori kérdések