國際化

Element 組件內(nèi)部默認(rèn)使用中文，若希望使用其他語言，則需要進(jìn)行多語言設(shè)置。以英文為例，在 main.js 中：

// 完整引入 Element
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })

或

// 按需引入 Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// 設(shè)置語言
locale.use(lang)

// 引入組件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

如果使用其它語言，默認(rèn)情況下中文語言包依舊是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替換默認(rèn)語言包。

webpack.config.js

{
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
  ]
}

?兼容 [email protected]

Element 兼容 [email protected]，搭配使用能更方便地實(shí)現(xiàn)多語言切換。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)
Vue.use(Element)

Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)

?兼容其他 i18n 插件

如果不使用 [email protected]，而是用其他的 i18n 插件，Element 將無法兼容，但是可以自定義 Element 的 i18n 的處理方法。

import Vue from 'vue'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(Element, {
  i18n: function (path, options) {
    // ...
  }
})

?兼容 [email protected]

默認(rèn)不支持 6.x 的 vue-i18n，你需要手動處理。

import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
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: {
    message: 'hello',
    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
  },
  zh: {
    message: '你好',
    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({ i18n }).$mount('#app')

?按需加載里定制 i18n

import Vue from 'vue'
import DatePicker from 'element/lib/date-picker'
import VueI18n from 'vue-i18n'

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'

Vue.use(VueI18n)
Vue.use(DatePicker)

const messages = {
  en: {
    message: 'hello',
    ...enLocale
  },
  zh: {
    message: '你好',
    ...zhLocale
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

ElementLocale.i18n((key, value) => i18n.t(key, value))

?通過 CDN 的方式加載語言文件

<script src="http://unpkg.com/vue@2"></script>
<script src="http://unpkg.com/element-ui"></script>
<script src="http://unpkg.com/element-ui/lib/umd/locale/en.js"></script>

<script>
  ELEMENT.locale(ELEMENT.lang.en)
</script>

搭配 vue-i18n 使用

<script src="http://unpkg.com/vue@2"></script>
<script src="http://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="http://unpkg.com/element-ui"></script>
<script src="http://unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
<script src="http://unpkg.com/element-ui/lib/umd/locale/en.js"></script>

<script>
  Vue.locale('en', ELEMENT.lang.en)
  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>

目前 Element 內(nèi)置了以下語言：

• 簡體中文（zh-CN）
• 英語（en）
• 德語（de）
• 葡萄牙語（pt）
• 西班牙語（es）
• 丹麥語（da）
• 法語（fr）
• 挪威語（nb-NO）
• 繁體中文（zh-TW）
• 意大利語（it）
• 韓語（ko）
• 日語（ja）
• 荷蘭語（nl）
• 越南語（vi）
• 俄語（ru-RU）
• 土耳其語（tr-TR）
• 巴西葡萄牙語（pt-br）
• 波斯語（fa）
• 泰語（th）
• 印尼語（id）
• 保加利亞語（bg）
• 波蘭語（pl）
• 芬蘭語（fi）
• 瑞典語（sv-SE）
• 希臘語（el）
• 斯洛伐克語（sk）
• 加泰羅尼亞語（ca）
• 捷克語（cs-CZ）
• 烏克蘭語（ua）
• 土庫曼語（tk）
• 泰米爾語（ta）
• 拉脫維亞語（lv）
• 南非荷蘭語（af-ZA）
• 愛沙尼亞語（ee）
• 斯洛文尼亞語（sl）
• 阿拉伯語（ar）
• 希伯來語（he）
• 立陶宛語（lt）
• 蒙古語（mn）
• 哈薩克斯坦語（kz）
• 匈牙利語（hu）
• 羅馬尼亞語（ro）
• 庫爾德語（ku）
• 維吾爾語（ug-CN）
• 高棉語（km）
• 塞爾維亞語（sr）
• 巴斯克語（eu）
• 吉爾吉斯語（kg）
• 亞美尼亞語 (hy)
• 克羅地亞 (hr)
• 世界語 (eo)

如果你需要使用其他的語言，歡迎貢獻(xiàn) PR：只需在 這里 添加一個語言配置文件即可。