mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
55348b30b6
* style: use prettier * style: just prettier format, no code changes * style: eslint fix object-shorthand, prefer-const * style: fix no-void * style: no-console
4.0 KiB
4.0 KiB
国际化
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>
详细配置见:ConfigProvider
CDN 用法
如果你是使用 CDN 引入的 ElementPlus,那你将需要这样做,以 unpkg 举例
<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
<script>
app.use(ElementPlus, {
locale: ElementPlus.lang.zhCn
})
</script>
- 简体中文(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'
),
]
}