【Vue】国际化vue-i18n

npm安装

npm install vue-i18n

main.js配置

引入插件

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

引入对应的语言文件

const i18n = new VueI18n({
  locale: 'zh', // 默认语言,在页面中更改this.$i18n.locale进行切换
  messages: {
    'zh': require('@/static/zh.json'),
    'en': require('@/static/en.json'),
    'ge': require('@/static/ge.json')
  }
})

注入到Vue实例

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

语言文件

zh.json

{
    "operation":"操作",
    "search":"搜索",
    "add":"添加",
    "delete":"删除",
    "edit":"编辑"
}

en.json　

{
    "operation":"Operation",
    "search":"Search",
    "add":"Add",
    "delete":"Delete",
    "edit":"Edit"
}

模板中的渲染

template中

<el-button @click="login" type="primary">{{$t('login')}}</el-button>

script中

this.$t('login')

切换语言

this.$i18n.locale = 'en'

注意:如在data中使用虽然刚开始加载是OK的但是在当前页面点击切换语言后，此时test还是之前语言的值，可行的解决方法放到computed中就OK了

data(){
  return{
      test:this.$t('login)
  }
}

正确

  computed: {
    rules () {
      return {
        deviceSn: [{ required: true, message: this.$t('please input') +this.$t('blank') + this.$t('device Sn'), trigger: 'blur' }]
      }
    }
  },

Element UI的国际化

Element组件默认使用中文

import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })