## 国际化

Element Plus 组件内部默认使用英语，若希望使用其他语言，则需要进行多语言设置。以中文为例，在 main.js 中

:::warning
我们在 **1.0.2-beta.59（包含59）** 之后的国际化按需引入有破坏性变动，请往下查看，该变动**不适用于 1.0.2-beta.58 之前的版本**
:::

### 1.0.2-beta.59（包含59）之后的更新：

在 `1.0.2-beta.58（包含59）`之后，我们重新组织了代码，让国际化功能能够被正常的使用(不论是全引入还是按需引入），一共有两种方式在项目中使用。

#### 1. 通过 ConfigProvider 的方式来使用，详细的使用方法请查阅 ConfigProvider 的文档
如果你的项目中还在使用 `options API`, 那么你应该使用此方法，我们更加建议用户使用该方法，因为这样会减少使用的负担，但如果你在项目中深度使用 `Composition API`，那么你可以使用第二种方法来为整个应用提供语言支持。

```html
<template>
  <el-config-provider :locale="locale">
    <App />
  </el-config-provider>
</template>

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

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

defineComponent({
  components: {
    [ElConfigProvider.name]: ElConfigProvider,
  },
  data() {
    return {
      locale: zhCn,
    }
  },
})
</script>
```

#### 有用的链接：
- [支持的语言列表](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)

- [ConfigProvider 文档](#/zh-CN/component/config-provider)

#### 2. 通过 Composable 的 Hook 使用
该方法基本就是通过你自己写一个 [ConfigProvider](https://element-plus.org/#/zh-CN/component/config-provider) 的方式，来注入所有配置

```ts
import { useLocale, useLocaleProps } from 'element-plus'
// Locale Wrapper 入口
const Provider = defineComponent({
  props: {
    // 如果你需要你的应用可以相应式的更新语言，那么这里的 props 必须包含下面这个 props
    ...useLocaleProps,
  },
  setup() {
    // 不需要任何参数，但是需要你的这个组件可以接受
    // ` { locale?: Language, i18n?: (...args: any[]) => string }` 作为参数
    useLocale()
  }
})


createApp(
  {
    // ...
    template: `
      <provider :locale="locale" :i18n="i18n">
        <App />
      </provider>
    `
  }
)

```

### 设置 Day.js 国际化

Element Plus 直接使用了 [Day.js](https://day.js.org/) 项目的时间日期国际化设置，如月份名称、每周第一天是周几等。并且会自动全局设置已经导入的 Day.js 国际化配置。

```typescript
import locale from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'

// 将自动设置 Day.js 的国际化设置为 'zh-cn'
app.use(ElementPlus, { locale })
```

当然，如果有需要，你也可以手动设置成其他 Day.js 国际化配置

```typescript
import 'dayjs/locale/fr'
dayjs.locale('fr')
```

如果使用其它语言，默认情况下英文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。

**webpack.config.js**

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

### 兼容 `vue-i18n@9.x`

如果需要查看 [VueI18n的文档](https://vue-i18n-next.intlify.dev/guide/#html), 请点击这个链接去查看

```typescript
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import ElementPlus from 'element-plus'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import App from './App.vue'

const messages = {
  [enLocale.name]: {
    // el 这个属性很关键，一定要保证有这个属性，
    el: enLocale.el,
    // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
    message: {
      hello: 'hello world',
    },
  },
  [zhLocale.name]: {
    el: zhLocale.el,
    // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
    message: {
      hello: '你好，世界',
    },
  },
  testLocale: {
    el: {},
    // 没有定义 message 字段，会 fallback 回到 en 去, fallbackLocale 的定义在下方 👇
  },
}

const i18n = createI18n({
  locale: zhLocale.name,
  fallbackLocale: enLocale.name,
  messages,
})

const app = createApp(App)

app.use(ElementPlus, {
  i18n: i18n.global.t,
})

// 要记得使用这个插件.
app.use(i18n)
```

### 兼容其他 i18n 插件

如果不使用 `vue-i18n@9.x`，而是用其他的 i18n 插件，Element Plus 将无法兼容，但是可以自定义 Element Plus 的 i18n 的处理方法。

:::tip
一旦设置了这个方法，ElementPlus 内置的翻译功能就会失效，会使用用户定义的翻译功能，所以一定要确保翻译方法能够正确的翻译  `el.scope.subName` 的格式，如果自定义的方法无法翻译 `el.select.noData` 的格式，将会使组件的文本失效.
:::

```typescript
import Vue from 'vue'
import ElementPlus from 'element-plus'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'

// 这是 i18n 函数的函数签名.
type i18n = (...args: any[]) => string
Vue.use(Element, {
  i18n: function(path, options) {
    // ...
  },
  // others.
})
```

### 按需加载里定制 i18n

如果你需要按需加载翻译文件，请查看[按需加载](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html)

```typescript
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import ElementPlus from 'element-plus'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import ElementLocale from 'element-plus/lib/locale'
import App from './App.vue'

const messages = {
  [enLocale.name]: {
    // el 这个属性很关键，一定要保证有这个属性，
    el: enLocale.el,
    // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
    message: {
      hello: 'hello world',
    },
  },
  [zhLocale.name]: {
    el: zhLocale.el,
    // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
    message: {
      hello: '你好，世界',
    },
  },
  testLocale: {
    el: {},
    // 没有定义 message 字段，会 fallback 回到 en 去, fallbackLocale 的定义在下方 👇
  },
}

const i18n = createI18n({
  locale: zhLocale.name,
  fallbackLocale: enLocale.name,
  messages,
})

ElementLocale.i18n(i18n.global.t)

const app = createApp(App)
app.use(i18n)
```

### 通过 CDN 的方式加载语言文件

```html
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/es.js"></script>
<script src="//unpkg.com/dayjs/locale/zh-cn.js"></script>

<script>
  ElementPlus.locale(ElementPlus.lang.zhCn)
</script>
```

搭配 `vue-i18n` 使用

```html
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>

<script>
  const i18n = Vue18n.createI18n({
    locale: ElementPlus.lang.zhCN.name,
    fallbackLocale: ElementPlus.lang.en.name,
    messages: {
      [ElementPlus.lang.en.name]: {
        // el 这个属性很关键，一定要保证有这个属性，
        el: ElementPlus.lang.en.el,
        // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
        message: {
          hello: 'hello world',
        },
      },
      [ElementPlus.lang.zhCN.name]: {
        el: ElementPlus.lang.zhCN.el,
        // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
        message: {
          hello: '你好，世界',
        },
      },
      testLocale: {
        el: {},
        // 没有定义 message 字段，会 fallback 回到 en 去.
      },
    },
  })

  const app = Vue.createApp()
  app.use(i18n)
</script>
```

目前 Element Plus 内置了以下语言：

<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/tree/dev/packages/locale/lang) 添加一个语言配置文件即可。