Utilisez le plug-in vue-i18 dans Vue pour réaliser une commutation multilingue

Cette fois, je vais vous apporter les précautions pour utiliser le plug-in vue-i18 dans Vue pour réaliser une commutation multilingue Lesquelles, les suivantes sont des cas pratiques, jetons un coup d'oeil.

étape 1 : Installer le plug-in vue-i18 dans le projet

cnpm install vue-i18n --save-dev

étape 2 : Dans le fichier d'entrée du projet main.js Présentation du plug-in vue-i18n

import Vue from 'vue' 
import router from './router' 
import VueI18n from 'vue-i18n' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
 locale: 'zh', // 语言标识 
 messages: { 
  'zh': require('./assets/lang/zh'), 
  'en': require('./assets/lang/en') 
 } 
}) 
// vue实例中引入 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 i18n, 
 router, 
 template: '<Layout/>', 
 components: { 
  Layout 
 }, 
})

étape 3 : Lors de l'utilisation de

dans la page et dans le modèle, il y a probablement les 3 situations suivantes. Le cas échéant, veuillez me corriger pour les omissions

zh.js

module.exports = { 
 menu : { 
   home:"首页" 
 }, 
 content:{ 
   main:"这里是内容" 
 } 
}

en.js

module.exports = { 
 menu : { 
   home:"home" 
 }, 
 content:{ 
   main:"this is content" 
 } 
}

1) Utilisez-le comme contenu du corps. dans la balise

<p class="title">{{$t('menu.home')}}</p>

2) Lorsqu'il est utilisé comme attribut de balise

<input :placeholder="$t(&#39;content.main&#39;)" type="text">

3) Lorsqu'il est utilisé comme texte chinois js

console.log(this.$t('content.main'));

4) À ajouter ...

étape 4 : Basculez la page entre le chinois et l'anglais et liez l'événement au bouton permettant de basculer entre le chinois et l'anglais, comme suit :

tabEn: function () { 
 this.$i18n.locale = 'en' 
}, 
tabCn: function () { 
 this.$i18n.locale = 'zh' 
}

À ce stade, l'utilisation du plug-in vue-i18n est terminée.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le filtre dans vue

Comment utiliser vue pour déterminer la classe de dom

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!