Le projet vue utilise une configuration multilingue (i18n)

avant-propos

i18n, c'est-à-dire la dépendance de configuration de plusieurs langues. En l'utilisant, il est très pratique pour les personnes de différents pays de visualiser leurs propres projets et de les basculer vers la langue de leur propre pays.
Cette vague est conforme aux normes internationales [comme]
Alors laissez-moi vous dire comment la configurer

marcher

Tout d'abord, vous devez installer le plugin vue-i18n, utilisez la commande

npm install vue-i18n --save

Installer.

---

Introduisez le plugin vue-i18n dans main.js et créez une instance :

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
    
    
  locale: 'zh', // 默认语言
  messages, // 引入语言文件
  fallbackLocale: 'en' // 没有对应语言时的默认语言
})

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

---

Parmi eux, messages est le fichier de langue importé, qui est personnalisé par nous et
nouvellement créé dans le projet messages.js, puis suit le format suivant :

const messages = {
    
    
  en: {
    
    
    welcome: 'Welcome to Vue',
    home: 'Home',
    about: 'About',
    contact: 'Contact Us'
  },
  zh: {
    
    
    welcome: '欢迎使用Vue',
    home: '主页',
    about: '关于我们',
    contact: '联系我们'
  }
}

export default messages

$tPour l'utiliser sur la page, nous devons utiliser la méthode à l'endroit traduit
comme suit :

<template>
  <div>
    {
   
   {$t('welcome')}}
  </div>
</template>

Remarque : il s'agit de la valeur d'attribut que nous avons personnalisée welcomeci-dessusmessages.js

---

De plus, afin d'obtenir un changement de langue pratique, vous pouvez ajouter une liste déroulante ou un bouton au composant pour changer de langue, et changer de langue via la méthode i18n.locale :

<template>
  <div>
    <button @click="setLocale('en')">English</button>
    <button @click="setLocale('zh')">中文</button>
    {
   
   {$t('welcome')}}
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    setLocale (locale) {
      
      
      this.$i18n.locale = locale
    }
  }
}
</script>

Le code ci-dessus implémente l'ajout de deux boutons au composant pour changer de langue. Le changement de langue peut être réalisé en appelant la méthode setLocale lorsque le bouton est cliqué, puis en définissant la valeur de i18n.locale.

épilogue

Ce qui précède est le processus de configuration d'i18n pour le projet vue