Die Internationalisierung und Lokalisierung in VUE -Apps werden haupts?chlich mit dem VUE I18N -Plugin behandelt. 1. Installieren Sie VUE-I18N über NPM oder Garn. 2. Erstellen Sie JSON -Dateien (z. B. en.json, Es.json) für übersetzungsnachrichten. 3. Richten Sie die I18N -Instanz in main.js mit Gebietsschema -Konfiguration und Nachrichtendateien ein. V. 5. übersetzungsschlüssel konsequent verwalten und eine tiefe Verschachtelung für die Skalierbarkeit vermeiden. 6. Wechseln Sie die Sprachen dynamisch, indem Sie die Gebietsschema zur Laufzeit aktualisieren. 7. Persist ausgew?hlte Sprache im lokalen Speicherspeicher für die Aufbewahrung von Benutzerpr?ferenzen. 8. Verwenden Sie dynamische Werte in übersetzungen mit variabler Injektion wie $ t ('Hellouser', {Name: 'Alice'}). 9. Pluralisationsregeln in i18n -Konfiguration implementieren und $ TC () für die ordnungsgem??e Pluralhandhabung verwenden. 10. Integrieren Sie Bibliotheken wie INTL oder Date-FNS, um erweiterte Anforderungen wie RTL-Unterstützung oder Datumsformatierung zu integrieren, um die vollst?ndige Lokalisierungsabdeckung sicherzustellen.

Internationalisierung (I18N) und Lokalisierung (L10N) in einer VUE-App sind haupts?chlich auf zwei Dinge zurückzuführen: Inhalte basierend auf der Sprachpr?ferenz des Benutzers und sicherzustellen, dass Text, Daten, Zahlen und andere lokalspezifische Elemente korrekt angezeigt werden. Der h?ufigste und leistungsst?rkste Weg, dies zu tun, besteht darin, VUE I18N , ein Plugin, speziell für VUE -Apps erstellt zu verwenden.

Einrichten von Vue i18n

Installieren Sie vue-i18n über NPM oder Garn, um zu starten:

 NPM install Vue-i18n@9

Erstellen Sie nach der Installation eine Gebietsmeldungsdatei (wie en.json , es.json usw.) und richten Sie die i18n -Instanz in Ihrem App -Einstiegspunkt ( main.js oder ?hnlich) ein:

 importieren {createApp} aus 'Vue'
Import {createi18n} aus 'Vue-i18n' '
App von './app.vue' importieren '
Importieren von './locales/en.json' '
Importieren von './locales/es.json' '

const i18n = createi18n ({{
  Verm?chtnis: Falsch,
  Gebietsschema: 'en',
  Fallbacklocale: 'en',
  Nachrichten: {
    en,
    es
  }
})

CreateApp (App) .use (i18n) .mount ('#App')

Jetzt k?nnen Sie überall in Ihren Vorlagen mit $t('key') auf übersetzungen zugreifen.

übersetzungsdateien effektiv verwalten

Halten Sie sie in strukturierten JSON -Dateien wie: anstelle von hartcodierenden Zeichenfolgen in Komponenten auf, wie:

en.json

 {
  "Willkommen": "Willkommen!",
  "Taste": {
    "Senden": "Senden"
  }
}

Es.json

 {
  "Willkommen": "?Bienvenido!",
  "Taste": {
    "Senden": "Enviar"
  }
}

Dies erleichtert die Wartung und Skalierung, wenn Ihre App w?chst. Sie k?nnen auch Tools wie Poeditor oder Crowdin verwenden, um übersetzungen zu verwalten, wenn Sie mit mehreren Sprachen oder Teams arbeiten.

Ein paar Tipps:

• Halten Sie die Tasten über konsequent über Orte hinweg.
• Vermeiden Sie tief verschachtelte Strukturen, es sei denn, sie k?nnen schnell chaotisch werden.
• Verwenden Sie Kommentare in separaten Dateien oder Tools, wenn Ihr Team Nichtentwickler enth?lt.

Sprachen dynamisch wechseln

Das ?ndern der Sprache der App zur Laufzeit ist einfach. Aktualisieren Sie einfach die locale auf der i18n -Instanz:

 Import {usei18n} aus 'Vue-i18n' '

Standard ausführen {
  aufstellen() {
    const {Locale} = nutzung18n ()

    Funktion ChangeLang (Newlang) {
      Lokale.Value = Newlang
    }

    Rückgabe {Locale, Changelang}
  }
}

In Ihrer Vorlage:

 <button @click = "Changelang (&#39;es&#39;)"> espa?ol </button>

Dies wechselt sofort alle lokalisierten Text in Ihrer App. Sie k?nnen auch die ausgew?hlte Sprache im lokalen Speicher behalten, damit Benutzer nicht jedes Mal wechseln müssen, wenn sie besuchen.

Umgang mit dynamischen und pluralisierten Inhalten

Manchmal müssen Sie Variablen in übersetzte Zeichenfolgen injizieren oder mit Pluralisierung umgehen. Vue i18n unterstützt beide:

Dynamische Werte verwenden:

In deinem JSON:

 "Hellouser": "Hallo, {Name}!"

In Ihrer Komponente:

 <p> {{$ t (&#39;Hellouser&#39;, {Name: &#39;Alice&#39;})}} </p>

Pluralisation:

Richten Sie die Pluralregeln in Ihrer i18n -Konfiguration ein:

 const i18n = createi18n ({{
  Verm?chtnis: Falsch,
  Gebietsschema: 'en',
  Fallbacklocale: 'en',
  Pluralrulen: {
    en: (Auswahl, Auswahl) => {
      if (ChoicesLength === 2) {
        Return Choice> 1? 1: 0
      }
      Return Choice? 1: 0
    }
  },
  Nachrichten: {
    en,
    es
  }
})

Dann in deinem JSON:

 "itemselected": "Sie haben {count} item | Sie ausgew?hlt {count} items ausgew?hlt"

Und in Ihrer Vorlage:

 <p> {{$ tc (&#39;itemSelected&#39;, itemCount, {count: itemCount})}} </p>

Dies tr?gt dazu bei, dass sich Ihre Benutzeroberfl?che in verschiedenen Sprachen natürlich anfühlt, in denen die Pluralregeln variieren.

So funktionieren I18N und L10N in Vue. Es ist nicht allzu kompliziert, wenn Sie die Struktur vorhanden haben, aber es ist leicht, einige Kantenf?lle wie RTL -Sprachen, Datumsformatierung oder W?hrungsbehandlung zu übersehen. Sehen Sie sich für diese in die Integration in Bibliotheken wie date-fns oder Intl . Aber für die meisten Standardbedürfnisse deckt Vue I18N es ziemlich gut ab.

Das obige ist der detaillierte Inhalt vonWie k?nnen Internationalisierung (I18N) und Lokalisierung (L10N) in einer VUE -Anwendung implementiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!