Conseils pour utiliser i18n pour implémenter la commutation multilingue dans Vue

Avec le développement continu de l'internationalisation, de plus en plus de sites Web et d'applications doivent prendre en charge des fonctions de commutation multilingues. En tant que framework frontal populaire, Vue fournit un plug-in appelé i18n qui peut nous aider à réaliser une commutation multilingue. Cet article présentera les techniques courantes d'utilisation d'i18n pour réaliser une commutation multilingue dans Vue.

Étape 1 : Installez le plug-in i18n

Tout d'abord, nous devons installer le plug-in i18n à l'aide de npm ou de fil. Entrez la commande suivante dans la ligne de commande :

npm install vue-i18n --save

ou

yarn add vue-i18n

Étape 2 : Configurer i18n

Dans le projet Vue, nous devons introduire i18n dans main.js et effectuer quelques configurations de base. Un exemple est le suivant :

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')
    }
})

Dans le code ci-dessus, nous instancions un objet i18n via new VueI18n(), et spécifions une langue locale par défaut de 'en-us' et une langue alternative fallbackLocale est 'zh-cn'. L'attribut messages est un objet qui répertorie toutes les langues qui doivent être prises en charge et utilise un fichier JSON pour stocker les informations de traduction correspondant à chaque langue. 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>{{$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()

Dans le code ci-dessus, nous enregistrons les informations de traduction en chinois dans le fichier locales/zh-cn.json et les informations de traduction en anglais dans le fichier locales/en-us.json. Ensuite, nous devons remplir les informations de traduction pour ces deux fichiers respectivement.

Étape 3 : Remplissez les informations de traduction de la langue

Dans le fichier locales/zh-cn.json, nous pouvons écrire les informations de traduction comme suit :

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

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

Dans le fichier locales/en-us.json, nous pouvons écrire les informations de traduction comme suit Méthode pour écrire les informations de traduction : 🎜rrreee🎜Dans l'exemple ci-dessus, "Bienvenue" et "Bonjour" sont les clés de traduction, et la chaîne suivante est le texte traduit (valeur). 🎜🎜Remarque : Pour des informations détaillées sur la façon de traduire votre contenu, veuillez rechercher vous-même les ressources de traduction. 🎜🎜Étape 4 : Utiliser les informations de traduction🎜🎜Une fois i18n configuré, nous pouvons utiliser les informations de traduction dans le composant Vue.js. Dans l'exemple de code, nous utilisons la méthode $t() pour implémenter la traduction. Il suffit d'ajouter la méthode $t() avant le texte à traduire. 🎜🎜L'exemple de code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous pouvons constater que les deux blocs de texte sont traduits à l'aide de la méthode $t(), et que "Bienvenue" et "Bonjour" sont déjà définis dans le fichier JSON. Bon clés de traduction. 🎜🎜Si vous souhaitez changer la langue actuelle, vous pouvez définir une méthode dans le composant pour mettre à jour la propriété $i18n.locale. Par exemple, si vous souhaitez passer à l'anglais, vous pouvez le faire avec le code suivant : 🎜rrreee🎜Étape 5 : Utiliser le sucre de syntaxe🎜🎜Vue-i18n fournit également du sucre de syntaxe pour simplifier la mise en œuvre de certains cas d'utilisation courants. 🎜🎜Par exemple, nous pouvons utiliser la méthode $t() pour afficher le texte traduit avec des variables. Par exemple : 🎜rrreee🎜Dans l'exemple ci-dessus, nous utilisons la méthode data() du composant Vue pour définir une variable nommée userName puis référençons la variable dans le deuxième paramètre de la méthode $t(). Par exemple, traduisez dynamiquement un texte tel que « Bienvenue, Alice ! » 🎜🎜Résumé🎜🎜L'utilisation des plug-ins i18n est une méthode populaire pour implémenter la commutation multilingue dans Vue. Après avoir complété les informations de configuration et de traduction de langue à l'aide du plug-in i18n, nous pouvons utiliser la méthode $t() dans le composant pour afficher le texte traduit. Lors de la mise en œuvre, le sucre syntaxique peut également être utilisé pour simplifier les cas d'utilisation courants. J'espère que cet article pourra vous aider à mieux comprendre comment utiliser i18n dans Vue.js. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!