工作总结：vue国际化vue-i18n

由于公司的项目，需要支持英文版。项目的ui框架使用了element-ui,还使用了Avue的crud组件。其实国际化很简单，只是替换名字变量的工作量比较大，这里简单记录一下国际化的配置。

"vue-i18n": "^7.3.2",

下载vue-i18n的插件，在main中引入lang.js

import i18n from './lang'
Vue.use(ElementUI, {
  size: 'small',
  menuType: 'text',
  i18n: (key, value) => i18n.t(key, value)
})
//因为AVUE也支持国际化
Vue.use(window.AVUE, {
  size: 'small',
  menuType: 'text',
  i18n: (key, value) => i18n.t(key, value)

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

lang文件进行相关的配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { getStore } from '@/util/store'
import elementEnLocale from 'element-ui/lib/locale/lang/en' 
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,  //本地配置文件
    ...elementEnLocale,
    ...window.AVUE.locale.en,
  },
  zh: {
    ...zhLocale, //本地配置文件
    ...elementZhLocale,
    ...window.AVUE.locale.zh,
  }
}


export function getLanguage() {
  const chooseLanguage = getStore({ name: 'language' })
  if (chooseLanguage) return chooseLanguage

  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'en'
}
const i18n = new VueI18n({
 
  locale: getLanguage(),
  messages
})

export default i18n

提一些自己配置文件：设置一下相关变量就好

//en
export default {
     title:"myTitle",
    fullscreen:"fullscreen",
    logout:"logout"
}
//zh
export default {
    title:"标题",
    fullscreen:"全屏",
    logout:"退出系统"

}

设置切换中英文

<el-dropdown @command="handleSetLanguage">
  <div class="top-right__item lang">
    <i :class="language==='zh'?'icon-a-zhongyingwenqiehuanzhongwenban-01':'icon-a-zhongyingwenqiehuanyingwenban-01'" style="font-size: 30px !important;"></i>
  </div>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item divided :disabled="language==='zh'" command="zh">
      <div >切换中文</div>
    </el-dropdown-item>
    <el-dropdown-item divided :disabled="language==='en'" command="en">
      <div >toggle English</div>
    </el-dropdown-item>

  </el-dropdown-menu>

</el-dropdown>


handleSetLanguage(lang) {
  this.$i18n.locale = lang
  this.$store.dispatch('setLanguage', lang)
  this.$message({
    message: 'Switch Language Success',
    type: 'success'
  })
}

<el-button >
{{$t('logout')}}
</el-button>