Use vue-i18 plug-in in Vue to achieve multi-language switching

This time I will bring you how to use the vue-i18 plug-in in Vue to achieve multi-language switching, and how to use the vue-i18 plug-in in Vue to achieve multi-language switching. NotesThere are Which ones, the following are practical cases, let’s take a look.

#step1: Install the vue-i18 plug-in in the project

cnpm install vue-i18n --save-dev

step2:Introduce it into the project’s entry filemain.js vue-i18n plug-in

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 
 }, 
})

#step3: When using

in the page and in the template, there are probably the following three situations. If there are any omissions, please let us know. Correction

zh.js

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

en.js

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

1) Use it as the body content in the tag

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

2) Use it as the tag attribute

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

3) When used as js Chinese text

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

4) To be added...

step4: Switch between Chinese and English on the page, and bind the button for switching between Chinese and English Define the event as follows:

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

At this point, the use of the vue-i18n plug-in is completed.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use filter in vue

##How to use vue to determine the class of dom

The above is the detailed content of Use vue-i18 plug-in in Vue to achieve multi-language switching. For more information, please follow other related articles on the PHP Chinese website!