国际化

Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：

  1. // 完整引入 Element
  2. import Vue from 'vue'
  3. import ElementUI from 'element-ui'
  4. import locale from 'element-ui/lib/locale/lang/en'
  6. Vue.use(ElementUI, { locale })

或

  1. // 按需引入 Element
  2. import Vue from 'vue'
  3. import { Button, Select } from 'element-ui'
  4. import lang from 'element-ui/lib/locale/lang/en'
  5. import locale from 'element-ui/lib/locale'
  7. // 设置语言
  8. locale.use(lang)
  10. // 引入组件
  11. Vue.component(Button.name, Button)
  12. Vue.component(Select.name, Select)

如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。

webpack.config.js

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

兼容 vue-i18n@5.x

Element 兼容 vue-i18n@5.x，搭配使用能更方便地实现多语言切换。

  1. import Vue from 'vue'
  2. import VueI18n from 'vue-i18n'
  3. import Element from 'element-ui'
  4. import enLocale from 'element-ui/lib/locale/lang/en'
  5. import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
  7. Vue.use(VueI18n)
  8. Vue.use(Element)
  10. Vue.config.lang = 'zh-cn'
  11. Vue.locale('zh-cn', zhLocale)
  12. Vue.locale('en', enLocale)

兼容其他 i18n 插件

如果不使用 vue-i18n@5.x，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。

  1. import Vue from 'vue'
  2. import Element from 'element-ui'
  3. import enLocale from 'element-ui/lib/locale/lang/en'
  4. import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
  6. Vue.use(Element, {
  7.   i18n: function (path, options) {
  8.     // ...
  9.   }
  10. })

兼容 vue-i18n@6.x

默认不支持 6.x 的 vue-i18n，你需要手动处理。

  1. import Vue from 'vue'
  2. import Element from 'element-ui'
  3. import VueI18n from 'vue-i18n'
  4. import enLocale from 'element-ui/lib/locale/lang/en'
  5. import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
  7. Vue.use(VueI18n)
  9. const messages = {
  10.   en: {
  11.     message: 'hello',
  12.     ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
  13.   },
  14.   zh: {
  15.     message: '你好',
  16.     ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
  17.   }
  18. }
  19. // Create VueI18n instance with options
  20. const i18n = new VueI18n({
  21.   locale: 'en', // set locale
  22.   messages, // set locale messages
  23. })
  25. Vue.use(Element, {
  26.   i18n: (key, value) => i18n.t(key, value)
  27. })
  29. new Vue({ i18n }).$mount('#app')

按需加载里定制 i18n

  1. import Vue from 'vue'
  2. import DatePicker from 'element/lib/date-picker'
  3. import VueI18n from 'vue-i18n'
  5. import enLocale from 'element-ui/lib/locale/lang/en'
  6. import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
  7. import ElementLocale from 'element-ui/lib/locale'
  9. Vue.use(VueI18n)
  10. Vue.use(DatePicker)
  12. const messages = {
  13.   en: {
  14.     message: 'hello',
  15.     ...enLocale
  16.   },
  17.   zh: {
  18.     message: '你好',
  19.     ...zhLocale
  20.   }
  21. }
  22. // Create VueI18n instance with options
  23. const i18n = new VueI18n({
  24.   locale: 'en', // set locale
  25.   messages, // set locale messages
  26. })
  28. ElementLocale.i18n((key, value) => i18n.t(key, value))

通过 CDN 的方式加载语言文件

  1. <script src="//unpkg.com/vue"></script>
  2. <script src="//unpkg.com/element-ui"></script>
  3. <script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
  5. <script>
  6.   ELEMENT.locale(ELEMENT.lang.en)
  7. </script>

搭配 vue-i18n 使用

  1. <script src="//unpkg.com/vue"></script>
  2. <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
  3. <script src="//unpkg.com/element-ui"></script>
  4. <script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
  5. <script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
  7. <script>
  8.   Vue.locale('en', ELEMENT.lang.en)
  9.   Vue.locale('zh-cn', ELEMENT.lang.zhCN)
  10. </script>

目前 Element 内置了以下语言：

  • 简体中文（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）
  • 捷克语（cz）
  • 乌克兰语（ua）
  • 土库曼语（tk）
  • 泰米尔语（ta）
  • 拉脱维亚语（lv）
  • 南非荷兰语（af-ZA）
  • 爱沙尼亚语（ee）
  • 斯洛文尼亚语（sl）
  • 阿拉伯语（ar）
  • 希伯来语（he）
  • 立陶宛语（lt）
  • 蒙古语（mn）
  • 哈萨克斯坦语（kz）
  • 匈牙利语（hu）
  • 罗马尼亚语（ro）
    如果你需要使用其他的语言，欢迎贡献 PR：只需在 这里 添加一个语言配置文件即可。