vue2/element項目多語言（插件i8n）

引入vue-i8n和語言包

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookie from 'js-cookie'
import elementZh from 'element-ui/lib/locale/lang/zh-CN'
import elementEN from 'element-ui/lib/locale/lang/en'

import zh from './zh'
import en from './en'

Vue.use(VueI18n)

export default new VueI18n({
  locale: Cookie.get('language') || 'zh',  //切換locale的值就可以切換語言了，當locale為 'zh' 時，t(key)和$t(key)函數就會根據傳入的key去 message中 zh 指定的語言包中找到key對應的值，key值支持帶  . 號的字符串
  messages: {
    en: {
      ...elementEN,
      ...en
    },
    zh: {
      ...elementZh,
      ...zh
    }
  }
})

掛載vue-i8n和引入elementui

import i18n from '@/lang'

//注冊elementUI的組件，並設置element為當前的語言
Vue.use(ElementUI, {
   i18n: (key, value) => i18n.t(key, value)  //當切換 locale 的時候，t()函數會根據傳入的key值去locale指定的語言包中找響應的值
  }
})

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

在自定義頁面組織結構應用

當我們全局注冊i18n的時候，每個組件都會擁有一個$t 的方法，它會根據傳入的key，自動的去尋找當前語言的文本，我們可以將左側菜單變成多語言展示文本

    <div>{{ $t('route.dashboard') }}</div>  // 如果當前 locale的值是 'zh',則顯示首頁，如果當前 locale的值是 'en',則顯示Dashboard；
    <item :title="$t('route.users')"/>  // $t()也可以用在 標簽屬性中
	
//en.js 語言包中導出的語言包內容
export default {
  route: {
    dashboard: 'Dashboard',
    manage: 'manage',
    users: 'users',
    menus: 'menus'}
    }

//zh.js 語言包中導出的語言包內容
export default {
  route: {
    dashboard: '首頁',
    manage: '后台管理',
    users: '用戶管理',
    menus: '菜單管理',
    logs: '日志管理',
    example: '示例',
    table: '數據列表'
	}
}

切換組件

  methods: {
    changeLanguage(type) {
      //    設置的類型  先寫入到cookie
      Cookie.set('language', type) // 寫入cookie緩存
      // 改變當前的多語言
      this.$i18n.locale = type // 將當前的多語言類型改成對應的類型
      this.$message.success('切換多語言成功')
    }
  }