ElementPlus 國(guó)際化

國(guó)際化

ElementPlus 組件內(nèi)部默認(rèn)使用英語，若希望使用其他語言，可以參考下面的方案。

全局配置

ElementPlus 提供了全局配置國(guó)際化的設(shè)置。

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

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

ConfigProvider

ElementPlus 還提供了一個(gè) Vue 組件 ConfigProvider 用于全局配置國(guó)際化的設(shè)置。

<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

詳細(xì)配置見：ConfigProvider

CDN 用法

如果你是使用 CDN 引入的 ElementPlus，那你將需要這樣做，以 unpkg 舉例

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

支持的語言列表

• 簡(jiǎn)體中文（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)

如果你需要使用其他的語言，歡迎貢獻(xiàn) PR 只需在這里 添加一個(gè)語言配置文件即可。

常見問題

如果我想要替換默認(rèn)語言包來減小打包體積，應(yīng)該怎么做？

當(dāng)你的應(yīng)用默認(rèn)不是使用英語的時(shí)候，你需要額外引入一個(gè)新的語言，這樣會(huì)使得沒有用到的語言文件被打包，會(huì)增加最終產(chǎn)物的文件大小，如果你非常在意最終產(chǎn)物文件的大小，你可以使用 webpack 提供的 NormalModuleReplacementPlugin 插件替換默認(rèn)語言包。你可以把以下代碼添加進(jìn) webpack.config.js 文件中來應(yīng)用這個(gè)插件。

webpack.config.js

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