vue实现语言转换

通过vue-i18n实现的语言的转换

首先自然要先安装vue-i18n

npm install vue-i18n

安装完成后再main.js中使用vue-i18n

import VueI18n from 'vue-i18n'
import en from '../static/lang/en'
import zhCHS from '../static/lang/zhCN'
import zhCHT from '../static/lang/zhTW'

Vue.use(VueI18n)

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


new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

其中en,zhCN等是我们自己使用的语言包，结构如下：

zhCN.js

module.exports={
  Message:{
    home:'首页',
    news:'动态'
  }
}

在template标签中使用

{
  {$t("Message.home")}}

这会从当前的语言包中渲染出相