So nutzen Sie Vue für die Internationalisierung und Mehrsprachenumschaltung

So verwenden Sie Vue für die Internationalisierung und den Wechsel zwischen mehreren Sprachen

Einführung:
Mit der Entwicklung der Globalisierung erfordern viele Websites oder Anwendungen die Unterstützung mehrerer Sprachen, um den Anforderungen verschiedener Benutzer gerecht zu werden. Im Vue-Framework können wir Internationalisierung und Mehrsprachenumschaltung problemlos implementieren. In diesem Artikel wird die Verwendung des Vue-i18n-Plug-Ins zur Implementierung von Internationalisierung und Mehrsprachenumschaltung vorgestellt und entsprechende Codebeispiele gegeben.

1. Installieren und konfigurieren Sie Vue-i18n
Zuerst müssen wir das Vue-i18n-Plug-in installieren. Führen Sie den folgenden Befehl im Stammverzeichnis des Projekts aus:

npm install vue-i18n --save

Führen Sie nach Abschluss der Installation Vue-i18n in die Datei main.js ein und konfigurieren Sie es.

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', //默认语言为英文
  messages: {
    'en': require('./locales/en.json'), //英文语言包
    'zh': require('./locales/zh.json') //中文语言包
  }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

Im obigen Code stellen wir zunächst das Vue-i18n-Plugin vor und verwenden es über die Methode Vue.use().
Als nächstes wurde eine Instanz von VueI18n erstellt und konfiguriert. Unter anderem gibt das Attribut „locale“ die Standardsprache als Englisch an und das Attribut „messages“ enthält Sprachpakete für verschiedene Sprachen.
Durch die Übergabe des i18n-Objekts an die i18n-Option der Vue-Instanz kann schließlich die gesamte Anwendung auf das i18n-Objekt zugreifen.

2. Sprachpaketdateien erstellen
Im Code im vorherigen Schritt haben wir zwei Sprachpaketdateien eingeführt: en.json und zh.json. Wird zum Speichern von englischen bzw. chinesischen Übersetzungstexten verwendet.
Wir erstellen einen Locales-Ordner und erstellen in diesem Ordner die Dateien en.json und zh.json. Der Inhalt ist wie folgt:

en.json:

{
  "home": "Home",
  "about": "About",
  "contact": "Contact"
}

zh.json:

{
  "home": "首页",
  "about": "关于我们",
  "contact": "联系我们"
}

Der obige Inhalt definiert die entsprechenden Übersetzungstexte der drei Übersetzungselemente „home“, „about“ und „contact“.

3. Übersetzten Text in der Komponente verwenden
In der Vue-Komponente können wir den entsprechenden übersetzten Text über die Methode this.$t() abrufen.

<template>
  <div>
    <h1>{{ $t('home') }}</h1>
    <p>{{ $t('about') }}</p>
    <a>{{ $t('contact') }}</a>
  </div>
</template>

Im obigen Code wird der übersetzte Text, der „home“ entspricht, über {{ $t('home') }} abgerufen und als Titel der Seite gerendert. Ebenso können wir auch {{ $t('about') }} und {{ $t('contact') }} verwenden, um den übersetzten Text anderer Übersetzungselemente abzurufen und ihn auf der Seite darzustellen.

4. Sprache wechseln
Das Vue-i18n-Plug-in bietet auch eine Hilfsfunktion this.$i18n.locale zum Abrufen und Festlegen des aktuellen Gebietsschemas. Durch Ändern des Locale-Werts können wir eine mehrsprachige Umschaltung erreichen.

<template>
  <div>
    <select v-model="$i18n.locale">
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  </div>
</template>

Der obige Code erstellt eine Dropdown-Liste, in der der Benutzer das aktuelle Gebietsschema ändern kann, indem er verschiedene Optionen auswählt. Verknüpfen Sie die Dropdown-Liste mit this.$i18n.locale über die V-Model-Anweisung, um eine bidirektionale Bindung zu erreichen.

Zusammenfassung:
In diesem Artikel wird erläutert, wie Sie mit dem Vue-i18n-Plug-In Internationalisierung und Mehrsprachenumschaltung erreichen. Zuerst haben wir das Vue-i18n-Plugin installiert und konfiguriert. Als Nächstes wird die Sprachpaketdatei erstellt und die Methode this.$t in der Komponente verwendet, um den übersetzten Text abzurufen. Schließlich wird durch die Verwendung von this.$i18n.locale zum Umschalten der Sprache die Funktion zum Umschalten mehrerer Sprachen implementiert. Ich hoffe, dass dieser Artikel allen bei der Implementierung von Internationalisierung und Mehrsprachenumschaltung in Vue-Projekten hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo nutzen Sie Vue für die Internationalisierung und Mehrsprachenumschaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!