Comment implémenter la commutation multilingue et l'internationalisation dans les projets Vue

Comment implémenter la commutation multilingue et l'internationalisation dans les projets Vue

Introduction :
Dans le contexte actuel de mondialisation, de nombreux sites Web et applications doivent fournir un support multilingue pour répondre aux besoins des différents groupes d'utilisateurs. En tant que framework frontal populaire, Vue fournit également un moyen pratique de réaliser une commutation et une internationalisation multilingues. Cet article présentera comment implémenter la commutation multilingue et l'internationalisation dans le projet Vue, et donnera des exemples de code spécifiques.

1. Préparation

1. Installez les dépendances nécessaires
   Avant de commencer, nous devons installer le plug-in vue-i18n pour obtenir une prise en charge multilingue. Dans le répertoire racine du projet, ouvrez l'outil de ligne de commande et exécutez la commande suivante :

npm install vue-i18n --save

2. Créer des fichiers de ressources de langue
   Créez un dossier locales dans le répertoire src et créez-y plusieurs fichiers Fichiers JSON de langage, tels que en.json et zh.json. Ces fichiers stockeront les données de traduction pour différentes langues.

En prenant l'anglais comme exemple, ajoutez le contenu suivant dans en.json :

{
"header": "Bienvenue sur mon site Web!",
"content": "Ceci est un projet Vue pour le support multilingue . ",
"button": "Changer de langue"
}

Ajoutez le contenu suivant dans zh.json :

{
"header": "Bienvenue sur mon site Web!",
"content": "Ceci est A projet qui utilise Vue pour implémenter le support multilingue. ",
"button": "Changer de langue"
}

2. Configuration et utilisation

1. Importez et configurez vue-i18n
   Dans le fichier main.js, nous d'abord vous devez importer vue-i18n et le configurer. Ajoutez le code suivant au début du fichier :

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
locale: ' fr', / / ​​La langue par défaut est l'anglais
messages : {

en: require('./locales/en.json'),
zh: require('./locales/zh.json')

}
})

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

2. Utilisation de plusieurs langues dans les composants
   Ensuite, dans les composants qui nécessitent un support multilingue, nous pouvons utiliser this.$t pour obtenir le texte traduit. Par exemple, dans le composant Header.vue, nous pouvons l'utiliser comme ceci :

3. basculer la langue
   Afin d'implémenter la fonction de changement de langue, nous pouvons ajouter un bouton au composant et appeler la méthode this.$i18n.locale dans l'événement click pour changer la langue actuelle. Par exemple, dans le composant Header.vue, on peut ajouter le code suivant :

< ;script>
export default {
méthodes : {

switchLanguage() {
  if (this.$i18n.locale === 'en') {
    this.$i18n.locale = 'zh'
  } else {
    this.$i18n.locale = 'en'
  }
}

}
}

À ce stade, nous avons terminé la configuration et l'utilisation de la commutation multilingue et de l'internationalisation dans le projet Vue. Dans la page Web, une fois que l'utilisateur a cliqué sur le bouton de changement de langue, la langue affichée sur la page peut être changée en temps réel.

Conclusion :
La mise en œuvre de la commutation multilingue et de l'internationalisation dans un projet Vue est un processus relativement simple. En utilisant le plugin vue-i18n, nous pouvons facilement introduire plusieurs fichiers de ressources linguistiques dans le projet et utiliser le texte traduit dans le composant via la méthode this.$t. Dans le même temps, nous pouvons également utiliser la méthode this.$i18n.locale pour changer la langue actuelle. J'espère que cet article pourra aider les lecteurs à implémenter avec succès les fonctions de commutation et d'internationalisation multilingues 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!