Skip to main content

Vue i18n: celovita nastavitev internacionalizacije z vue-i18n

Od namestitve do produkcije: nastavite vue-i18n s Composition API, obravnavajte množinske oblike s pravili CLDR, uporabite interpolacijo komponent in dodajte pametne verige nadomestnih jezikovnih različic.

1

Namestite vue-i18n

vue-i18n je uradni vtičnik za internacionalizacijo v Vue.js. Zagotavlja odzivne prevode, množinske oblike v slogu ICU, interpolacijo komponent, oblikovanje datumov, časa in števil ter podporo za Options API in Composition API.

Terminal
npm install vue-i18n@9
2

Nastavite vue-i18n

S createI18n() ustvarite primerek i18n in ga registrirajte kot vtičnik Vue. Določite svoja jezikovna sporočila, nastavite privzeto jezikovno različico in nadomestno različico. vue-i18n podpira podedovani način (Options API) in način sestavljanja (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')
Če vidite napake 'Not available in legacy mode', mešate klice i18n Composition API (useI18n()) z nastavitvijo podedovanega načina. V createI18n() nastavite legacy: false, če želite uporabljati način Composition API, ali pa dosledno uporabljajte skladnjo $t() iz Options API.
3

Uporabljajte prevode v predlogah

vue-i18n v predlogah ponuja funkcijo $t() (Options API), iz useI18n() pa funkcijo t() (Composition API). Obe sprejmeta prevajalski ključ in neobvezne poimenovane parametre ali sezname za interpolacijo.

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

Obravnavajte množinske oblike

vue-i18n podpira množinske oblike, ločene z navpičnicami, in funkcijo $tc() (podedovani način) oziroma t() s parametrom števila (Composition API). Množinske oblike v jezikovnih sporočilih določite z ločilom navpičnice: '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>
Množinska skladnja z navpičnicami podpira samo glavne števnike z največ tremi oblikami (zero | one | other). Pri jezikih z zapletenimi množinskimi pravili CLDR (arabščina, ruščina, poljščina) uporabite skladnjo ICU MessageFormat ali modifikator @.plural z izrecnimi preslikavami kategorij CLDR.
5

Dodajte verige nadomestnih jezikovnih različic

Vgrajeni fallbackLocale v vue-i18n podpira samo ploski seznam nadomestnih jezikovnih različic, ne pa verig za posamezno različico. Uporabnik različice pt-BR pri manjkajočem ključu namesto pt-PT dobi angleščino. vue-i18n-locale-chain doda nastavljive verige z globokim združevanjem, tako da regionalni uporabniki vedno vidijo najbližji razpoložljivi 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 sporočila globoko združi ob nalaganju. Sistem odzivnosti vue-i18n združeni nabor sporočil shrani v predpomnilnik, zato nadomestna iskanja ne zmanjšajo učinkovitosti med izvajanjem.
6

Avtomatizirajte prevode

Ko nastavite vue-i18n, svoje jezikovne datoteke JSON prevedite z umetno inteligenco. V svojem razvojnem okolju IDE prosite pomočnika umetne inteligence, naj prevede izvorno datoteko, ali pa prevajanje vključite v pipeline CI/CD za povsem avtomatizirano lokalizacijo.

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

Nastavitev verige nadomestnih jezikovnih različic

Za vsako jezikovno različico nastavite nadomestno verigo, da bodo regionalni uporabniki videli najbližji razpoložljivi prevod, namesto da bi takoj preklopili na angleščino. vue-i18n podpira fallbackLocale v obliki predmeta za določanje verig po posamezni različici.

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': { /* ... */ },
  },
})
Predmet fallbackLocale Vam omogoča, da za različne jezikovne različice določite različne verige. Uporabniku pt-BR se kot nadomestilo ponudita pt in nato en, uporabniku zh-Hant-TW pa zh-Hant, zh in nato en.

Pogoste pasti

Mešanje podedovanega načina in načina Composition API

Uporaba useI18n() z legacy: true (privzeto) povzroča napake. Če uporabljate Composition API, v createI18n() nastavite legacy: false, sicer pa v predlogah z Options API uporabljajte $t(). V isti aplikaciji ne mešajte obeh načinov.

Uporaba v-html za prevedena besedila

Uporaba v-html za izris prevodov, ki vsebujejo HTML, pomeni tveganje XSS, če katera od interpoliranih vrednosti izvira iz uporabniškega vnosa. Za prevode z vgrajenim HTML ali komponentami Vue uporabite komponento &lt;i18n-t&gt;: privzeto je varna in podpira odzivno vgrajevanje komponent.

Regionalni uporabniki namesto nadrejene različice vidijo angleščino

fallbackLocale v vue-i18n je ploski seznam, ne veriga za posamezno jezikovno različico. pt-BR se vrne k tistemu, kar je na seznamu (navadno 'en'), in povsem preskoči pt-PT. Z vue-i18n-locale-chain dodajte pravilno regionalno nadomeščanje z globokim združevanjem.

Preizkusite i18n Agent zdaj

Spustite prevajalsko datoteko sem

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

ali kliknite za izbiro

Ciljni jeziki

Registracija ni potrebnaTakojšnja ocena

Pogosta vprašanja o Vue i18n