国际化

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

  1. // 完整引入 Element
  2. import { createApp } from 'vue'
  3. import ElementPlus from 'element-plus'
  4. import locale from 'element-plus/lib/locale/lang/zh-cn'
  5. createApp(App).use(ElementPlus, { locale })

  1. // 按需引入 Element
  2. import Vue from 'vue'
  3. import { ElButton, ElSelect } from 'element-plus'
  4. import lang from 'element-plus/lib/locale/lang/zh-cn'
  5. import locale from 'element-plus/lib/locale'
  6. // 设置语言
  7. locale.use(lang)
  8. // 引入组件
  9. Vue.component(ElButton.name, ElButton)
  10. Vue.component(ElSelect.name, ElSelect)

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

webpack.config.js

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

兼容 vue-i18n@5.x

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

  1. import Vue from 'vue'
  2. import VueI18n from 'vue-i18n'
  3. import ElementPlus from 'element-plus'
  4. import enLocale from 'element-plus/lib/locale/lang/en'
  5. import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
  6. import App from './App.vue';
  7. const app = createApp(App)
  8. app.use(ElementPlus)
  9. Vue.use(VueI18n)
  10. Vue.config.lang = 'zh-cn'
  11. Vue.locale('zh-cn', zhLocale)
  12. Vue.locale('en', enLocale)

兼容其他 i18n 插件

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

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

兼容 vue-i18n@6.x

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

  1. import Vue from 'vue'
  2. import ElementPlus from 'element-plus'
  3. import VueI18n from 'vue-i18n'
  4. import enLocale from 'element-plus/lib/locale/lang/en'
  5. import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
  6. Vue.use(VueI18n)
  7. const messages = {
  8. en: {
  9. message: 'hello',
  10. ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
  11. },
  12. zh: {
  13. message: '你好',
  14. ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
  15. }
  16. }
  17. // Create VueI18n instance with options
  18. const i18n = new VueI18n({
  19. locale: 'en', // set locale
  20. messages, // set locale messages
  21. })
  22. Vue.use(Element, {
  23. i18n: (key, value) => i18n.t(key, value)
  24. })
  25. 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'
  4. import enLocale from 'element-plus/lib/locale/lang/en'
  5. import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
  6. import ElementLocale from 'element-plus/lib/locale'
  7. Vue.use(VueI18n)
  8. Vue.use(DatePicker)
  9. const messages = {
  10. en: {
  11. message: 'hello',
  12. ...enLocale
  13. },
  14. zh: {
  15. message: '你好',
  16. ...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. })
  24. ElementLocale.i18n((key, value) => i18n.t(key, value))

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

  1. <script src="//unpkg.com/vue"></script>
  2. <script src="//unpkg.com/element-plus"></script>
  3. <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
  4. <script>
  5. ELEMENT.locale(ELEMENT.lang.en)
  6. </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-plus"></script>
  4. <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
  5. <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
  6. <script>
  7. Vue.locale('en', ELEMENT.lang.en)
  8. Vue.locale('zh-cn', ELEMENT.lang.zhCN)
  9. </script>

目前 Element Plus 内置了以下语言:

  • 简体中文(zh-cn)
  • 英语(en)
  • 德语(de)
  • 葡萄牙语(pt)
  • 西班牙语(es)
  • 丹麦语(da)
  • 法语(fr)
  • 挪威语(nb-no)
  • 繁体中文(zh-tw)
  • 意大利语(it)
  • 韩语(ko)
  • 日语(ja)
  • 荷兰语(nl)
  • 越南语(vi)
  • 俄语(ru)
  • 土耳其语(tr)
  • 巴西葡萄牙语(pt-br)
  • 波斯语(fa)
  • 泰语(th)
  • 印尼语(id)
  • 保加利亚语(bg)
  • 波兰语(pl)
  • 芬兰语(fi)
  • 瑞典语(sv)
  • 希腊语(el)
  • 斯洛伐克语(sk)
  • 加泰罗尼亚语(ca)
  • 捷克语(cs)
  • 乌克兰语(uk)
  • 土库曼语(tk)
  • 泰米尔语(ta)
  • 拉脱维亚语(lv)
  • 南非荷兰语(af)
  • 爱沙尼亚语(et)
  • 斯洛文尼亚语(sl)
  • 阿拉伯语(ar)
  • 希伯来语(he)
  • 立陶宛语(lt)
  • 蒙古语(mn)
  • 哈萨克斯坦语(kk)
  • 匈牙利语(hu)
  • 罗马尼亚语(ro)
  • 库尔德语(ku)
  • 维吾尔语(ug-cn)
  • 高棉语(km)
  • 塞尔维亚语(sr)
  • 巴斯克语(eu)
  • 吉尔吉斯语(ky)
  • 亚美尼亚语 (hy-am)
  • 克罗地亚 (hr)
  • 世界语 (eo)

如果你需要使用其他的语言,欢迎贡献 PR:只需在 这里 添加一个语言配置文件即可。