Skip to main content

Vue i18n: kansainvälistämisen täydellinen käyttöönotto vue-i18n:llä

Asennuksesta tuotantoon: määritä vue-i18n Composition API:lla, käsittele monikkomuodot CLDR-säännöillä, käytä komponenttien interpolointia ja lisää älykkäät varakieliketjut.

1

Asenna vue-i18n

vue-i18n on Vue.js:n virallinen kansainvälistämislisäosa. Se tarjoaa reaktiiviset käännökset, ICU-tyyppiset monikkomuodot, komponenttien interpoloinnin, päivämäärien ja lukujen muotoilun sekä Options API- ja Composition API -tuen.

Terminal
npm install vue-i18n@9
2

Määritä vue-i18n

Luo i18n-instanssi createI18n()-funktiolla ja rekisteröi se Vue-lisäosaksi. Määritä kieliversiosanomat sekä oletus- ja varakieliversiot. vue-i18n tukee sekä legacy (Options API)- että composition (Composition API) -tilaa.

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')
Jos näet 'Not available in legacy mode' -virheitä, sekoitat Composition API:n i18n-kutsuja (useI18n()) legacy-tilan määrityksiin. Käytä Composition API -tilaa asettamalla createI18n()-funktiossa legacy: false tai käytä johdonmukaisesti Options API:n $t()-syntaksia.
3

Käytä käännöksiä malleissa

vue-i18n tarjoaa malleihin $t()-funktion (Options API) ja useI18n()-funktion palauttaman t()-funktion (Composition API). Molemmat vastaanottavat käännösavaimen ja valinnaiset nimetyt tai luetteloparametrit interpolointiin.

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

Käsittele monikkomuodot

vue-i18n tukee monikkomuotoja pystyviivalla erotetuilla muodoilla ja $tc()-funktiolla (legacy) tai t()-funktiolla ja count-parametrilla (Composition API). Määritä monikkomuodot kieliversiosanomissa pystyviivaerottimella: '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>
Pystyviivalla erotettu monikkosyntaksi tukee vain kardinaalisia monikkomuotoja ja enintään kolmea muotoa (zero | one | other). Käytä monimutkaisia CLDR-monikkosääntöjä käyttävissä kielissä (arabia, venäjä, puola) ICU MessageFormat -syntaksia tai @.plural-muunninta eksplisiittisillä CLDR-luokkien yhdistämisillä.
5

Lisää varakieliketjut

vue-i18n:n sisäänrakennettu fallbackLocale tukee vain litteää varakieliversioiden luetteloa, ei kieliversiokohtaisia ketjuja. Puuttuvan avaimen kohtaava pt-BR-käyttäjä siirtyy pt-PT:n sijaan englantiin. vue-i18n-locale-chain lisää määritettävät syväyhdistetyt ketjut, jotta alueelliset käyttäjät näkevät aina lähimmän saatavilla olevan käännöksen.

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 syväyhdistää sanomat latauksen aikana. vue-i18n:n reaktiivisuusjärjestelmä tallentaa yhdistetyn sanomajoukon välimuistiin, joten varakielihaut eivät aiheuta suorituskykykuormaa.
6

Automatisoi käännökset

Kun vue-i18n on määritetty, käännä kieliversioiden JSON-tiedostot tekoälyllä. Pyydä IDE-ympäristössäsi tekoälyavustajaasi kääntämään lähdetiedosto tai integroi käännökset CI/CD-putkeesi täysin automaattista lokalisointia varten.

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

Varakieliketjun määritys

Määritä kieliversiokohtaiset varakieliketjut, jotta alueelliset käyttäjät näkevät lähimmän saatavilla olevan käännöksen eivätkä siirry suoraan englantiin. vue-i18n tukee kieliversiokohtaisten ketjujen määrittämistä objektityyppisellä fallbackLocale-arvolla.

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-objektilla voit määrittää eri ketjut eri kieliversioille. pt-BR-käyttäjä siirtyy pt:hen ja sitten en:ään, kun taas zh-Hant-TW-käyttäjä siirtyy zh-Hantiin, zh:hon ja sitten en:ään.

Tavalliset sudenkuopat

Legacy- ja Composition API -tilojen sekoittaminen

useI18n()-funktion käyttö oletusarvoisen legacy: true -asetuksen kanssa aiheuttaa virheitä. Jos käytät Composition API:a, aseta createI18n()-funktiossa legacy: false. Muussa tapauksessa pysy mallien $t()-funktiossa Options API:lla. Älä sekoita tiloja samassa sovelluksessa.

v-html:n käyttö käännetyille merkkijonoille

HTML:ää sisältävien käännösten hahmontaminen v-html:llä on XSS-riski, jos interpolointiarvot tulevat käyttäjän syötteestä. Käytä upotettua HTML:ää tai Vue-komponentteja sisältäviin käännöksiin &lt;i18n-t&gt;-komponenttia — se on oletusarvoisesti turvallinen ja tukee reaktiivista komponenttien upotusta.

Alueelliset käyttäjät näkevät pääkieliversion sijaan englannin

vue-i18n:n fallbackLocale on litteä luettelo, ei kieliversiokohtainen ketju. pt-BR siirtyy luettelon kieliversioon, tavallisesti en:ään, ja ohittaa pt-PT:n kokonaan. Lisää oikea alueellinen varakieli syväyhdistämällä vue-i18n-locale-chainilla.

Kokeile i18n Agent:ia nyt

Pudota käännöstiedostosi tähän

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

tai valitse napsauttamalla

Kohdekielet

Rekisteröitymistä ei tarvitaVälitön arvio

Usein kysyttyä Vue i18n:stä