Tipps zur Verwendung von i18n zur Implementierung der Mehrsprachenumschaltung in Vue

Mit der kontinuierlichen Weiterentwicklung der Internationalisierung müssen immer mehr Websites und Anwendungen mehrsprachige Umschaltfunktionen unterstützen. Als beliebtes Front-End-Framework bietet Vue ein Plug-In namens i18n, das uns bei der Umschaltung mehrerer Sprachen helfen kann. In diesem Artikel werden gängige Techniken zur Verwendung von i18n zur Erzielung einer mehrsprachigen Umschaltung in Vue vorgestellt.

Schritt 1: Installieren Sie das i18n-Plug-in

Zuerst müssen wir das i18n-Plug-in mit npm oder Yarn installieren. Geben Sie den folgenden Befehl in die Befehlszeile ein:

npm install vue-i18n --save

oder

yarn add vue-i18n

Schritt 2: i18n konfigurieren

Im Vue-Projekt müssen wir i18n in main.js einführen und einige grundlegende Konfigurationen durchführen. Ein Beispiel ist wie folgt:

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

const i18n = new VueI18n({
    locale: 'en-us', // 默认语言为英语
    fallbackLocale: 'zh-cn', // 如果当前语言没有在 locale 对象中找到，则使用 fallbackLocale 作为备选语言
    messages: {
        'zh-cn': require('./locales/zh-cn.json'),
        'en-us': require('./locales/en-us.json')
    }
})

Im obigen Code instanziieren wir ein i18n-Objekt über new VueI18n() und geben ein Standard-Sprachgebietsschema von „en-us“ und ein alternatives Sprach-FallbackLocale an ist 'zh-cn'. Das Nachrichtenattribut ist ein Objekt, das alle Sprachen auflistet, die unterstützt werden müssen, und eine JSON-Datei verwendet, um die Übersetzungsinformationen jeder Sprache zu speichern. new VueI18n() 实例化了一个 i18n 对象，并且指定了一个默认语言 locale 为 'en-us'，和一个备选语言 fallbackLocale 为 'zh-cn'。messages 属性是一个对象，用来列举所有需要支持的语言，并用 JSON 文件存储各语言对应的翻译信息。

在上述代码中，我们将中文翻译信息保存在 locales/zh-cn.json 文件中，将英文翻译信息保存在 locales/en-us.json 文件中。接下来，我们需要分别对这两个文件进行翻译信息的填写。

第三步：填写语言翻译信息

在 locales/zh-cn.json 文件中，我们可以按照以下方式编写翻译信息：

{
    "Welcome": "欢迎使用 Vue",
    "Hello": "你好，世界！"
}

在 locales/en-us.json 文件中，我们可以按照以下方式编写翻译信息：

{
    "Welcome": "Welcome to Vue",
    "Hello": "Hello, world!"
}

在以上示例中，"Welcome" 和 "Hello" 是翻译的键（key），后面的字符串则是翻译后的文本（value）。

注：有关于如何翻译您的内容的详细信息，请自行查找翻译资料。

第四步：使用翻译信息

一旦 i18n 已经配置好，我们就可以在 Vue.js 组件中使用翻译信息了。在示例代码中，我们使用 $t() 方法来实现翻译。我们只需要在需要翻译的文本前加上 $t() 方法即可。

示例代码如下：

<template>
  <div>
    <h1 id="t-Welcome">{{$t('Welcome')}}</h1>
    <p>{{$t('Hello')}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

在上述代码中，我们可以发现两个文本区块都使用了 $t() 方法进行了翻译，而 "Welcome" 和 "Hello" 则是在 JSON 文件中已经定义好的翻译键。

如果你要更改当前语言，你可以在组件中定义一个方法来更新 $i18n.locale 属性。例如，如果想切换为英文，可以通过下面的代码实现：

this.$i18n.locale = 'en-us'

第五步：使用语法糖

Vue-i18n 还提供了一些语法糖，简化了一些常见用例的实现。

例如，我们可以使用 $t()

Im obigen Code speichern wir die chinesischen Übersetzungsinformationen in der Datei „locales/zh-cn.json“ und die englischen Übersetzungsinformationen in der Datei „locales/en-us.json“. Als nächstes müssen wir die Übersetzungsinformationen für diese beiden Dateien eingeben.

Schritt 3: Geben Sie die Sprachübersetzungsinformationen ein

In die Datei „locales/zh-cn.json“ können wir die Übersetzungsinformationen wie folgt schreiben:

<template>
  <div>
    <h1 id="t-Welcome-name-userName">{{ $t('Welcome', { name: userName }) }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userName: 'Alice'
    }
  },
}
</script>

In die Datei „locales/en-us.json“ können wir schreiben die Übersetzungsinformationen wie folgt Methode zum Schreiben von Übersetzungsinformationen: 🎜rrreee🎜Im obigen Beispiel sind „Willkommen“ und „Hallo“ die Übersetzungsschlüssel, und die folgende Zeichenfolge ist der übersetzte Text (Wert). 🎜🎜Hinweis: Für detaillierte Informationen zur Übersetzung Ihrer Inhalte suchen Sie bitte selbst nach Übersetzungsressourcen. 🎜🎜Schritt 4: Übersetzungsinformationen verwenden🎜🎜Sobald i18n konfiguriert wurde, können wir die Übersetzungsinformationen in der Vue.js-Komponente verwenden. Im Beispielcode verwenden wir die Methode $t(), um die Übersetzung zu implementieren. Wir müssen lediglich die Methode $t() vor dem zu übersetzenden Text hinzufügen. 🎜🎜Der Beispielcode lautet wie folgt: 🎜rrreee🎜Im obigen Code können wir feststellen, dass beide Textblöcke mit der Methode $t() übersetzt wurden und „Willkommen“ und „Hallo“ bereits in der JSON-Datei definiert sind. Gut Übersetzungsschlüssel. 🎜🎜Wenn Sie die aktuelle Sprache ändern möchten, können Sie in der Komponente eine Methode definieren, um die Eigenschaft $i18n.locale zu aktualisieren. Wenn Sie beispielsweise auf Englisch umstellen möchten, können Sie dies mit dem folgenden Code tun: 🎜rrreee🎜Schritt 5: Syntaxzucker verwenden🎜🎜Vue-i18n stellt auch etwas Syntaxzucker bereit, um die Implementierung einiger häufiger Anwendungsfälle zu vereinfachen. 🎜🎜Zum Beispiel können wir die Methode $t() verwenden, um übersetzten Text mit Variablen anzuzeigen. Zum Beispiel: 🎜rrreee🎜Im obigen Beispiel verwenden wir die data()-Methode der Vue-Komponente, um eine Variable namens userName zu definieren und dann im zweiten Parameter der $t()-Methode auf die Variable zu verweisen. Übersetzen Sie beispielsweise dynamisch Texte wie „Willkommen, Alice!“ 🎜🎜Zusammenfassung🎜🎜Die Verwendung von i18n-Plug-Ins ist eine beliebte Methode zur Implementierung der Mehrsprachenumschaltung in Vue. Nachdem wir die Konfigurations- und Sprachübersetzungsinformationen mithilfe des i18n-Plug-Ins abgeschlossen haben, können wir die Methode $t() in der Komponente verwenden, um den übersetzten Text anzuzeigen. Bei der Implementierung kann syntaktischer Zucker auch verwendet werden, um häufige Anwendungsfälle zu vereinfachen. Ich hoffe, dass dieser Artikel Ihnen helfen kann, die Verwendung von i18n in Vue.js besser zu verstehen. 🎜

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von i18n zur Implementierung der Mehrsprachenumschaltung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!