i18n国际化配置

最近做了一个i18n国际化配置
下面是详细过程：

1. 下载i18n

npm install vue-i18n

2. 创建i18n文件夹

   
   image.png

3. 创建翻译的文本对象

   
   image.png

4. 在index文件中引入国际化配置文件（也可以直接挂载到下一步）

import en from './en'
import cn from './zh-cn'
import mo from './zh-mo'
// import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
// import elementCnLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
// import elementMoLocale from 'element-ui/lib/locale/lang/zh-TW'// element-ui lang

export default {
  en: {
    ...en,
    // ...elementEnLocale
  },
  cn: {
    ...cn,
    // ...elementCnLocale
  },
  mo: {
    ...mo,
    // ...elementMoLocale
  }
}

5. 在i18n.js中配置

// 引入插件和语言包
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'
import locale from 'element-ui/lib/locale'

Vue.use(VueI18n)// 通过插件的形式挂载
const i18n = new VueI18n({//实例化vue-i18n
  // 从本地存储中取，如果没有默认为中文，
  // 这样可以解决切换语言后，没记住选择的语言，刷新页面后还是默认的语言
  locale: localStorage.lang || 'cn',
  messages
})

//locale.i18n((key, value) => i18n.t(key, value))//实现element插件的多语言切换
export default i18n

6. 在main.js中引入

import i18n from './i18n/i18n'
// element ui
//import ElementUI from 'element-ui';
//import 'element-ui/lib/theme-chalk/index.css';
//Vue.use(ElementUI);


var vue =  new Vue({
  el: '#app',
  i18n,
  // ElementUI,
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})
export default vue

7. 在页面中使用

<h3>{{$t('message.usersLogin')}}</h3>

8. 切换语言

<!-- 语言选择框 -->
   <template>
     <el-select
       v-model="value"
       placeholder="中文"
       size="mini"
       width='20px'
       @change="language"
       class="language"
     >
       <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value"
       >
       </el-option>
     </el-select>
   </template>



 data () {
    return {
      options: [{
        value: 'cn',
        label: '中文'
      }, {
        value: 'en',
        label: '英语'
      }, {
        value: 'mo',
        label: '繁体中文'
      }],
      value: ''
}


 language (value) {
      this.$i18n.locale = value
      localStorage.setItem('lang', value)
}

注释的是elementUI的国际化配置