Comment faire du traitement multilingue dans Vue ?

Dans le développement actuel, la prise en charge multilingue des sites Web ou des applications est devenue une fonctionnalité nécessaire. En tant que framework JavaScript populaire, Vue prend également en charge plusieurs langages. Cet article présentera le schéma et les détails d'implémentation du traitement multilingue dans Vue.

1. Sélection du forfait
   Il existe de nombreux forfaits d'assistance multilingues, notamment, mais sans s'y limiter, les suivants :

1.1. -end Integrated
implémente une fonctionnalité multilingue sur le front-end, prise en charge par le plug-in vue-i18n. L'introduction du module linguistique correspondant en tant que composant indépendant peut afficher différents contenus dans différents environnements linguistiques. L'avantage de cette méthode est qu'elle ne nécessite pas de support de serveur, mais elle nécessite la traduction et la gestion de textes associés multilingues sur le front-end, elle convient donc aux sites Web ou aux applications qui n'ont pas d'exigences multilingues élevées.

1.2. Support back-end
Stockez le contenu multilingue dans la base de données back-end et affichez-le sur le front-end sous forme d'appels d'interface. Cette méthode nécessite la prise en charge du serveur, mais la traduction et la gestion du texte peuvent être confiées à des professionnels langagiers de différents pays. Cette méthode convient aux grands sites Web ou aux systèmes de gestion d'entreprise qui nécessitent un degré élevé de personnalisation ou de contrôle des autorisations.

Dans le cadre de cet article, nous utiliserons vue-i18n, une méthode intégrée frontale, pour le traitement multilingue. La prochaine étape présentera l'utilisation de Vue-i18n en détail.

2. Comment utiliser Vue-i18n
   Vue-i18n est une bibliothèque multilingue officiellement lancée par Vue, fournissant plusieurs méthodes de changement de langue, une traduction réactive et des fonctions de traitement d'internationalisation. En introduisant le package vue-i18n, nous pouvons facilement implémenter des fonctions multilingues dans Vue.

2.1 Installation et introduction de Vue-i18n
L'installation de Vue-i18n est très simple et peut être installée via npm ou Yarn :

npm install vue-i18n

#🎜. 🎜#at Introduisez vue-i18n dans le composant Vue :

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

2.2. Configurer le multilingue

Définir le contenu multilingue dans le composant Vue :

const messages = {
  en: {
    welcome: 'Welcome to our website'
  },
  zh: {
    welcome: '欢迎访问我们的网站'
  }
}

. 2.3. Créez une instance de VueI18n# 🎜🎜#Créez une instance de VueI18n et initialisez-la :

const i18n = new VueI18n({
  locale: 'en',
  messages
});

L'attribut Locale définit la langue par défaut sur 'en', et les messages sont une collection de contenu multilingue, y compris la clé -paires de valeurs dans certaines langues courantes.

2.4. Utiliser i18n en HTML

En HTML, on peut appeler du contenu multilingue via la directive $t ou v-t :

<div>{{ $t("message.welcome") }}</div>

where "message. " bienvenue" est la valeur clé définie dans l'attribut messages. Vue-i18n affichera dynamiquement le texte correspondant en fonction de la langue actuelle.

2.5. Changer de langue

Nous pouvons changer la langue actuelle via l'objet i18n :

i18n.locale = ‘zh’;

2.6 Traduction réactive

Vue-i18n fournit un A. méthode de traduction réactive, fonction i18n.t. Grâce à cette méthode, la dynamique du changement de langue sera automatiquement surveillée et le texte sera automatiquement traduit en fonction de la langue actuelle. Comme indiqué ci-dessous :

export default {
  data() {
    return {
      welcomeText: this.$t('message.welcome'),
    };
  },
};

Dans l'extrait de code ci-dessus, lorsque la langue change, le texte de WelcomeText sera automatiquement mis à jour vers la version linguistique correspondante.

Summary

Vue-i18n fournit une solution multilingue simple et facile à utiliser grâce à des appels d'interface pratiques et à l'intégration de composants Vue, les développeurs peuvent rapidement intégrer et déployer plusieurs. langues. Dans les projets réels, nous pouvons combiner les caractéristiques de la langue et de la culture du pays pour créer une solution multilingue plus adaptée aux besoins réels, rendant le site Web ou l'application plus convivial et convivial.
3. 
   

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!