mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +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
139 lines
4.0 KiB
Markdown
139 lines
4.0 KiB
Markdown
# 国际化
|
||
|
||
ElementPlus 组件内部**默认**使用英语，若希望使用其他语言，可以参考下面的方案。
|
||
|
||
## 全局配置
|
||
|
||
ElementPlus 提供了全局配置国际化的设置。
|
||
|
||
```typescript
|
||
import ElementPlus from 'element-plus'
|
||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||
|
||
app.use(ElementPlus, {
|
||
locale: zhCn,
|
||
})
|
||
```
|
||
|
||
## ConfigProvider
|
||
|
||
ElementPlus 还提供了一个 Vue 组件 [ConfigProvider](/#/zh-CN/component/config-provider) 用于全局配置国际化的设置。
|
||
|
||
```html
|
||
<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](/#/zh-CN/component/config-provider)
|
||
|
||
## CDN 用法
|
||
|
||
如果你是使用 CDN 引入的 ElementPlus，那你将需要这样做，以 unpkg 举例
|
||
|
||
```html
|
||
<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
|
||
<script>
|
||
app.use(ElementPlus, {
|
||
locale: ElementPlus.lang.zhCn
|
||
})
|
||
</script>
|
||
```
|
||
|
||
[支持的语言列表](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
|
||
|
||
<ul class="language-list">
|
||
<li>简体中文（zh-cn）</li>
|
||
<li>英语（en）</li>
|
||
<li>德语（de）</li>
|
||
<li>葡萄牙语（pt）</li>
|
||
<li>西班牙语（es）</li>
|
||
<li>丹麦语（da）</li>
|
||
<li>法语（fr）</li>
|
||
<li>挪威语（nb-no）</li>
|
||
<li>繁体中文（zh-tw）</li>
|
||
<li>意大利语（it）</li>
|
||
<li>韩语（ko）</li>
|
||
<li>日语（ja）</li>
|
||
<li>荷兰语（nl）</li>
|
||
<li>越南语（vi）</li>
|
||
<li>俄语（ru）</li>
|
||
<li>土耳其语（tr）</li>
|
||
<li>巴西葡萄牙语（pt-br）</li>
|
||
<li>波斯语（fa）</li>
|
||
<li>泰语（th）</li>
|
||
<li>印尼语（id）</li>
|
||
<li>保加利亚语（bg）</li>
|
||
<li>波兰语（pl）</li>
|
||
<li>芬兰语（fi）</li>
|
||
<li>瑞典语（sv）</li>
|
||
<li>希腊语（el）</li>
|
||
<li>斯洛伐克语（sk）</li>
|
||
<li>加泰罗尼亚语（ca）</li>
|
||
<li>捷克语（cs）</li>
|
||
<li>乌克兰语（uk）</li>
|
||
<li>土库曼语（tk）</li>
|
||
<li>泰米尔语（ta）</li>
|
||
<li>拉脱维亚语（lv）</li>
|
||
<li>南非荷兰语（af）</li>
|
||
<li>爱沙尼亚语（et）</li>
|
||
<li>斯洛文尼亚语（sl）</li>
|
||
<li>阿拉伯语（ar）</li>
|
||
<li>希伯来语（he）</li>
|
||
<li>立陶宛语（lt）</li>
|
||
<li>蒙古语（mn）</li>
|
||
<li>哈萨克斯坦语（kk）</li>
|
||
<li>匈牙利语（hu）</li>
|
||
<li>罗马尼亚语（ro）</li>
|
||
<li>库尔德语（ku）</li>
|
||
<li>维吾尔语（ug-cn）</li>
|
||
<li>高棉语（km）</li>
|
||
<li>塞尔维亚语（sr）</li>
|
||
<li>巴斯克语（eu）</li>
|
||
<li>吉尔吉斯语（ky）</li>
|
||
<li>亚美尼亚语 (hy-am)</li>
|
||
<li>克罗地亚 (hr)</li>
|
||
<li>世界语 (eo)</li>
|
||
</ul>
|
||
|
||
如果你需要使用其他的语言，欢迎贡献 [PR](https://github.com/element-plus/element-plus/pulls) 只需在[这里](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) 添加一个语言配置文件即可。
|
||
|
||
## 常见问题
|
||
|
||
### 如果我想要替换默认语言包来减小打包体积，应该怎么做？
|
||
|
||
当你的应用默认不是使用**英语**的时候，你需要额外引入一个新的语言，这样会使得没有用到的语言文件被打包，会增加最终产物的文件大小，如果你非常在意最终产物文件的大小，你可以使用 [webpack](https://webpack.js.org) 提供的 [NormalModuleReplacementPlugin](https://webpack.js.org/plugins/normal-module-replacement-plugin/#root) 插件替换默认语言包。你可以把以下代码添加进 `webpack.config.js` 文件中来应用这个插件。
|
||
|
||
> webpack.config.js
|
||
|
||
```typescript
|
||
{
|
||
plugins: [
|
||
new webpack.NormalModuleReplacementPlugin(
|
||
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
|
||
'element-plus/lib/locale/lang/zh-cn'
|
||
),
|
||
]
|
||
}
|
||
```
|