最近公司的有国外的客户需要定制我们的后台项目，需要把所有的语言换成英文，正好这个项目没有做国际化，这次也把中英文切换给做了

我们的后台项目使用的是element.ui，这个ui也支持国际化，不过国际化这块的文档并不是很丰富，兼容的版本比较低.

VueI18n已经更新到比较高的版本了，不过使用高版本的VueI18也是很简单的.

1. 首先安装

   npm install vue-i18n

• 因为需要中英文两份语言，切换的时候需要动态切换语言内容，所以所有文字都不能写死.

2. 创建common目录，创建中英文两份文件en.js与zh.js文件

   export const lang = {
   message:'中文'
   }
   export const lang = {
   message:'英文'
   }

变量名字要一样的，切换的时候才能动态的切换.

3. 再创建index.js文件，在index.js里面引入element.ui的中英文文件与vue.

   import Vue from 'vue'
   import Element from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import enLocale from 'element-ui/lib/locale/lang/en'
   import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

• 这里引入element在main.js里面也就无需再引入了.

• 并且引入我们的Vuel18

  import VueI18n from 'vue-i18n'

• 实例化我们的i18n插件，并且添加element.ui语言包

  Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
  });
  //国际化
  const i18n = new VueI18n({
  locale: 'en-US', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
  messages: {
      //导入国际化语言文件，并且添加Element语音包
      'zh-CN': Object.assign(require('./zh'), zhLocale), // 中文语言包
      'en-US': Object.assign(require('./en'), enLocale) // 英文语言包
  }
  })
  export default i18n

使用起来也非常的简单

4. 在main.js中引入index.js文件

   new Vue({
   i18n,
   router,
   store,
   render: h => h(App)
   }).$mount('#app')
   html中使用$t('lang.你的变量名')
   在js中添加this.$t('lang.你的变量名')即可

如果需要在其他js文件中使用直接

import i18n from '../common/lang/index'
然后i18n.t('lang.你的变量名')即可

切换语言时只需要改变this.$i18n.locale就行了.

这样语言国际化就完成了.