vue3.0 ElementPlus 中文版入门教程 ElementPlus 国际化

2024-02-25 开发教程 vue3.0 ElementPlus 中文版入门教程匿名 25℃

国际化

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" rel="external nofollow" >
  <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 升级

"vue3.0 ElementPlus 中文版入门教程"的目录