vue-i18n結合Element-ui的配置

使用方法：

在配合 Element-UI 一塊兒使用時，會有2個問題：

（1）、頁面刷新後，經過按鈕切換的語言還原成了最初的語言，沒法保存

（2）、框架內部自帶的提示文字沒法更改，好比像時間選擇框內部中的提示文字

關於第一個問題，能夠在初始化VueI18n實例時，經過 localStorage 來爲 locale 對象賦值

在切換語言的時候能夠緩存不一樣的語言選項，而且能夠長期保存，不會由於刷新網頁而改變locale 的屬性值

const i18n = new VueI18n({
locale: localStorage.getItem('locale') || 'zh',
messages
})

關於第二個問題，更改Element 組件內部語言，這裏還涉及到 手動處理 vue-i18n@6.x 兼容性問題。 http://element-cn.eleme.io/#/... 官網已經作了詳細介紹，這裏依葫蘆畫瓢跟着實現一下

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale';
import zh from './langs/zh'
import en from './langs/en'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
const messages = {
en: Object.assign(en, enLocale),
zh: Object.assign(zh, zhLocale)
}
console.log(messages.zh)
const i18n = new VueI18n({
locale: localStorage.getItem('locale') || 'zh',
messages
})
locale.i18n((key, value) => i18n.t(key, value)) //爲了實現element插件的多語言切換
export default i18n

按照如上把國際化文件都整合到一塊兒，避免main.js 中大段引入相關代碼。main.js 中與 i18n 相關的就只剩兩行代碼

main.js

import i18n from './i18n/i18n' // 1行
window.app = new Vue({
el: '#app',
router,
store,
i18n, // 2行
components: { App },
template: '<App/>'
})