一個i18n國際化配置
下面是詳細(xì)過程：

1. 下載i18n

npm install vue-i18n

2. 創(chuàng)建i18n文件夾

   image

3. 創(chuàng)建翻譯的文本對象

   image

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({//實(shí)例化vue-i18n
  // 從本地存儲中取，如果沒有默認(rèn)為中文，
  // 這樣可以解決切換語言后，沒記住選擇的語言，刷新頁面后還是默認(rèn)的語言
  locale: localStorage.lang || 'cn',
  messages
})

//locale.i18n((key, value) => i18n.t(key, value))//實(shí)現(xiàn)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的國際化配置