Comment réaliser le multilingue et l'internationalisation dans Vue

Comment parvenir au multilinguisme et à l'internationalisation dans Vue

Introduction :
Avec l'accélération de la mondialisation et le développement d'Internet, de plus en plus d'applications Web doivent prendre en charge des environnements multilingues pour offrir une meilleure expérience utilisateur. En tant que framework JavaScript moderne, Vue fournit également des méthodes pratiques pour la mise en œuvre multilingue et l'internationalisation. Cet article expliquera comment implémenter le multilinguisme et l'internationalisation dans Vue, et donnera des exemples de code spécifiques.

1. Sélection de la bibliothèque d'internationalisation
La première tâche pour réaliser le multilinguisme et l'internationalisation dans Vue est de choisir une bibliothèque d'internationalisation appropriée. Actuellement, les bibliothèques d'internationalisation les plus couramment utilisées incluent vue-i18n et vue-intl.

1. vue-i18n :
   vue-i18n est un plug-in d'internationalisation pour Vue.js. Il fournit une série d'API et d'instructions pour nous faciliter la réalisation du multilingue et de l'internationalisation dans les applications Vue. Bénéficie d’un bon support communautaire et d’une maintenance de mise à jour stable.
2. vue-intl :
   vue-intl est un plug-in d'internationalisation pour Vue.js basé sur Format.js, qui fournit des fonctions plus riches et des options de configuration plus flexibles. Si le projet nécessite un traitement d'internationalisation plus complexe, vue-intl est un bon choix.

2. Configuration et utilisation de base
En prenant vue-i18n comme exemple, ce qui suit présentera comment configurer et utiliser le multilingue et l'internationalisation dans Vue.

1. Installation et configuration :
   Tout d'abord, nous devons installer vue-i18n en utilisant npm ou Yarn. Dans le répertoire racine du projet, exécutez la commande suivante :

   npm install vue-i18n

   Ensuite, introduisez vue-i18n dans le fichier main.js du projet et configurez-le :

   import Vue from 'vue';
   import VueI18n from 'vue-i18n';
   
   Vue.use(VueI18n);
   
   const i18n = new VueI18n({
     locale: 'zh-CN',
     messages: {
    'zh-CN': require('./locales/zh-CN.json'),
    'en-US': require('./locales/en-US.json'),
     },
   });
   
   new Vue({
     i18n,
   }).$mount('#app');

Dans le code ci-dessus, nous utilisons Vue.use () La méthode enregistre vue-i18n en tant que plugin Vue. Ensuite, créez une instance VueI18n et effectuez quelques configurations. Parmi eux, les paramètres régionaux représentent les paramètres régionaux par défaut et les messages représentent notre pack de langue.

2. Création et utilisation de packages de langage :
   Dans le code ci-dessus, nous voyons l'objet messages transmis lors de la création d'une instance VueI18n, qui est une table de mappage qui contient notre package de langage. Nous pouvons stocker les objets messages dans des fichiers séparés, tels que zh-CN.json et en-US.json, et les introduire via la méthode require(). Le contenu du package linguistique spécifique peut être défini dans le format suivant :

   // zh-CN.json
   {
     "hello": "你好",
     "world": "世界"
   }
   
   // en-US.json
   {
     "hello": "Hello",
     "world": "World"
   }

   En utilisant le multilingue et l'internationalisation dans le composant Vue, nous pouvons afficher le contenu du texte dans le package linguistique de la manière suivante :

   <template>
     <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('world') }}</p>
     </div>
   </template>

   Dans le code ci-dessus, $ t() est une méthode fournie par vue-i18n pour traduire du texte. En utilisation réelle, nous pouvons changer dynamiquement l'environnement linguistique en fonction des paramètres de préférences linguistiques de l'utilisateur et de sa sélection.

3. Changer dynamiquement les paramètres régionaux
Dans certains cas, nous devrons peut-être changer dynamiquement les paramètres régionaux au moment de l'exécution. vue-i18n fournit quelques méthodes pour obtenir cette fonctionnalité.

1. Changer de locale :
   Nous pouvons changer de locale en :

   this.$i18n.locale = 'en-US';

   Dans le code ci-dessus, nous modifions la locale actuelle en 'en-US', ce qui déclenchera le nouveau rendu du composant Vue et affichera une nouvelle langue contenu.

2. Utilisez la valeur de l'environnement linguistique local :
   Nous pouvons utiliser this.$i18n.locale dans le composant Vue pour obtenir la valeur de la locale actuelle.

4. Utilisation avancée de l'internationalisation
En plus de la traduction de texte de base, nous pouvons également avoir besoin d'un traitement d'internationalisation plus complexe, tel que le formatage de la date, le formatage des nombres, les symboles monétaires, etc.

1. Internationalisation de la date et de l'heure :
   vue-i18n fournit des fonctions de formatage de la date et de l'heure. Nous pouvons définir le format de la date et de l'heure dans le package de langue et l'utiliser des manières suivantes :

   <template>
     <div>
    <p>{{ $d(new Date(), 'short') }}</p>
    <p>{{ $d(new Date(), 'long') }}</p>
     </div>
   </template>

   Dans le code ci-dessus, $d() est une méthode fournie par vue-i18n pour formater la date et l'heure. Parmi eux, « court » et « long » sont des options de formatage pour la date et l'heure.

2. Internationalisation des nombres et des devises :
   De même, nous pouvons utiliser vue-i18n pour formater les nombres et les devises. Définissez le format des nombres et des devises dans le package de langue et utilisez-le des manières suivantes :

   <template>
     <div>
    <p>{{ $n(12345.6789, 'currency') }}</p>
    <p>{{ $n(12345.6789, 'decimal') }}</p>
     </div>
   </template>

   Dans le code ci-dessus, $n() est une méthode fournie par vue-i18n pour formater les nombres et les devises. Parmi eux, « devise » est l'option de formatage monétaire et « décimal » est l'option de formatage décimal.

Résumé :
Le multilingue et l'internationalisation sont l'une des fonctionnalités indispensables des applications Web modernes. Vue fournit des outils et des bibliothèques pratiques pour réaliser le multilingue et l'internationalisation. Dans cet article, nous expliquons principalement comment utiliser vue-i18n pour obtenir le multilinguisme et l'internationalisation, et donnons quelques exemples de code spécifiques. J'espère que cet article pourra vous aider à implémenter des fonctions multilingues et d'internationalisation dans votre projet 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!