Comment changer de langue nationale dans Vue

Cette fois, je vais vous montrer comment changer la langue nationale dans Vue, et quelles sont les précautions pour changer la langue nationale dans Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

Dans le processus de développement basé sur le projet vue-cli, la fonction de commutation multilingue peut utiliser le plug-in vue-i18. La méthode d'implémentation spécifique est la suivante :

. étape 1 : Installez vue-i18 dans le plug-in du projet

cnpm install vue-i18n --save-dev

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

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 : Page Lorsque vous utilisez

dans un modèle, il existe probablement les trois situations suivantes. S'il y a des omissions, veuillez me corriger

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) Utilisez-le comme un attribut de balise

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

3) Utilisez-le comme texte chinois js Heure

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

4) À ajouter...

étape 4 : Basculer entre le chinois et Anglais sur la page, et liez les événements au bouton pour basculer entre le chinois et l'anglais, comme suit :

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

À ce stade, le plug-in vue-i18n est terminé.

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 obtenir la position absolue des éléments DOM dans l'interface front-end

Comment optimiser le code angulaire

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!