Comment utiliser Vue pour l'internationalisation et la prise en charge multilingue

Comment utiliser Vue pour l'internationalisation et la prise en charge multilingue

Avec le développement de la mondialisation, de plus en plus de sites Web et d'applications doivent prendre en charge le multilingue pour répondre aux besoins des utilisateurs de différentes régions. En tant que framework frontal populaire, Vue offre un moyen simple et flexible de réaliser l'internationalisation et la prise en charge multilingue. Cet article expliquera comment utiliser l'internationalisation dans Vue et fournira des exemples de code.

1. Installer vue-i18n
   Tout d'abord, nous devons installer le plugin vue-i18n. Exécutez la commande suivante dans la ligne de commande pour installer vue-i18n :

npm install vue-i18n --save

2. Créer des fichiers de langue
   Créez un répertoire lang sous le répertoire src et créez-y un fichier langues.js. Le fichier Languages.js est utilisé pour stocker le texte traduit dans différentes langues. Par exemple, nous pouvons créer un fichier de langue chinoise et anglaise :

// src/lang/languages.js

const languages = {
  en: {
    welcome: 'Welcome to my website!',
    about: 'About',
    contact: 'Contact',
  },
  zh: {
    welcome: '欢迎来到我的网站！',
    about: '关于',
    contact: '联系',
  },
}

export default languages;

3. Créer une instance i18n
   Dans le fichier main.js, nous devons créer une instance i18n et introduire le fichier langues.js :

// main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import languages from './lang/languages';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  messages: languages,
});

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

dans ce qui précède Dans le code, nous avons d'abord introduit le plug-in VueI18n et l'avons enregistré dans Vue. Ensuite, nous avons créé une instance VueI18n et spécifié la langue par défaut comme l'anglais. Enfin, nous avons transmis l'instance i18n à l'instance Vue et démarré l'application.

4. Utilisation du texte traduit dans les composants
   Désormais, nous pouvons utiliser le texte traduit dans les composants. Nous pouvons accéder au texte de traduction via la méthode $t. Par exemple, dans un composant, nous pouvons utiliser le texte traduit comme ceci :

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <ul>
      <li>{{ $t('about') }}</li>
      <li>{{ $t('contact') }}</li>
    </ul>
  </div>
</template>

Dans le code ci-dessus, nous utilisons la méthode $t pour obtenir le texte traduit. Le paramètre de la méthode $t est la clé du texte traduit. Dans notre exemple, « bienvenue », « à propos » et « contact » sont autant de clés pour traduire du texte.

5. Changer de langue
   Vue-i18n offre également un moyen de changer de langue. Nous pouvons changer de langue en appelant la méthode $locale. Par exemple, nous pouvons ajouter un bouton pour changer de langue dans le composant :

<template>
  <div>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
  
    <h1>{{ $t('welcome') }}</h1>
    <ul>
      <li>{{ $t('about') }}</li>
      <li>{{ $t('contact') }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage(lang) {
      this.$i18n.locale = lang;
    },
  },
}
</script>

Dans le code ci-dessus, nous lions un événement click aux deux boutons Lorsque l'on clique sur le bouton, la méthode switchLanguage sera appelée pour changer. la langue.

À ce stade, nous avons terminé l'internationalisation et la prise en charge multilingue dans Vue. Grâce aux étapes ci-dessus, nous pouvons facilement traduire l'application Vue dans différentes langues et fournir une fonctionnalité de changement de langue. J'espère que cet article pourra vous aider à implémenter l'internationalisation et la prise en charge multilingue dans votre projet Vue.

Des exemples de code sont dans le lien du document officiel : https://kazupon.github.io/vue-i18n/

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!