Comment utiliser Vue pour l'internationalisation et la commutation multilingue

Comment utiliser Vue pour l'internationalisation et la commutation multilingue

Introduction :
Avec le développement de la mondialisation, de nombreux sites Web ou applications nécessitent la prise en charge de plusieurs langues pour répondre aux besoins des différents utilisateurs. Dans le framework Vue, nous pouvons facilement implémenter l'internationalisation et la commutation multilingue. Cet article expliquera comment utiliser le plug-in Vue-i18n pour implémenter l'internationalisation et la commutation multilingue, et donnera des exemples de code correspondants.

1. Installez et configurez Vue-i18n
Tout d'abord, nous devons installer le plug-in Vue-i18n. Exécutez la commande suivante dans le répertoire racine du projet :

npm install vue-i18n --save

Une fois l'installation terminée, introduisez Vue-i18n dans le fichier main.js et configurez-le.

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

Dans le code ci-dessus, nous introduisons d'abord le plugin Vue-i18n et l'utilisons via la méthode Vue.use().
Ensuite, une instance de VueI18n a été créée et configurée. Parmi eux, l'attribut locale spécifie la langue par défaut comme l'anglais et l'attribut messages contient des modules linguistiques pour différentes langues.
Enfin, en passant l'objet i18n à l'option i18n de l'instance Vue, toute l'application peut accéder à l'objet i18n.

2. Créer des fichiers de pack de langue
Dans le code de l'étape précédente, nous avons introduit deux fichiers de pack de langue : en.json et zh.json. Utilisé pour stocker respectivement les textes de traduction en anglais et en chinois.
Nous créons un dossier locales et créons des fichiers en.json et zh.json sous ce dossier. Le contenu est le suivant :

en.json:

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

zh.json:

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

Le contenu ci-dessus définit respectivement les textes de traduction correspondants des trois éléments de traduction "accueil", "à propos" et "contact".

3. Utiliser le texte traduit dans le composant
Dans le composant Vue, nous pouvons obtenir le texte traduit correspondant via la méthode this.$t().

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

Dans le code ci-dessus, le texte traduit correspondant à "home" est obtenu via {{ $t('home') }} et rendu comme titre de la page. De même, nous pouvons également utiliser {{ $t('about') }} et {{ $t('contact') }} pour obtenir le texte traduit d'autres éléments de traduction et le restituer dans la page.

4. Changer de langue
Le plug-in Vue-i18n fournit également une fonction auxiliaire this.$i18n.locale pour obtenir et définir les paramètres régionaux actuels. En modifiant la valeur des paramètres régionaux, nous pouvons réaliser une commutation multilingue.

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

Le code ci-dessus crée une liste déroulante dans laquelle l'utilisateur peut modifier les paramètres régionaux actuels en sélectionnant différentes options. Associez la liste déroulante à this.$i18n.locale via la directive v-model pour obtenir une liaison bidirectionnelle.

Résumé :
Cet article explique comment utiliser le plug-in Vue-i18n pour réaliser l'internationalisation et la commutation multilingue. Tout d'abord, nous avons installé et configuré le plugin Vue-i18n. Ensuite, le fichier du module linguistique est créé et la méthode this.$t est utilisée dans le composant pour obtenir le texte traduit. Enfin, en utilisant this.$i18n.locale pour changer de langue, la fonction de commutation multilingue est implémentée. J'espère que cet article sera utile à tout le monde dans la mise en œuvre de l'internationalisation et du changement multilingue dans les projets Vue.

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!