codecamp

ElementPlus 国际化

国际化

ElementPlus 组件内部默认使用英语,若希望使用其他语言,可以参考下面的方案。

全局配置

ElementPlus 提供了全局配置国际化的设置。

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

ConfigProvider

ElementPlus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script>
  import { defineComponent } from 'vue'
  import { ElConfigProvider } from 'element-plus'

  import zhCn from 'element-plus/lib/locale/lang/zh-cn'

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: zhCn,
      }
    },
  })
</script>
HTML

详细配置见:ConfigProvider

CDN 用法

如果你是使用 CDN 引入的 ElementPlus,那你将需要这样做,以 unpkg 举例

<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
  <script>
  app.use(ElementPlus, {
    locale: ElementPlus.lang.zhCn
  })
</script>
HTML

支持的语言列表

  • 简体中文(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 只需在这里 添加一个语言配置文件即可。

常见问题

如果我想要替换默认语言包来减小打包体积,应该怎么做?

当你的应用默认不是使用英语的时候,你需要额外引入一个新的语言,这样会使得没有用到的语言文件被打包,会增加最终产物的文件大小,如果你非常在意最终产物文件的大小,你可以使用 webpack 提供的 NormalModuleReplacementPlugin 插件替换默认语言包。你可以把以下代码添加进 webpack.config.js 文件中来应用这个插件。

webpack.config.js
{
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
      'element-plus/lib/locale/lang/zh-cn'
    ),
  ]
}


ElementPlus 快速上手
ElementPlus 从 Element 2.x 升级
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ElementPlus 配置

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }