element-plus/i18n.md at 886f2a307574b15e026f3d975a9f06b1396be2eb

mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-15 01:41:20 +08:00

* fix: fix i18n bundle error

* chore: update

* chore: update

2021-01-25 16:23:15 +08:00

9.0 KiB

Raw Blame History

国际化

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

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'

createApp(App).use(ElementPlus, { locale })

如果是通过 es modules 按需引入 Element Plus:

import { createApp } from 'vue'
import { ElButton, locale } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'

locale(lang)
createApp(App).component(ElButton.name, ElButton)

如果是通过 babel-plugin-component 插件按需引入 Element Plus:

import { createApp } from 'vue'
import { ElButton, ElSelect } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale'

// 设置语言
locale.use(lang)

// 引入组件
createApp(App).component(ElButton.name, ElButton)
createApp(App).component(ElSelect.name, ElSelect)

设置 Day.js 国际化

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

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 国际化配置

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

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

webpack.config.js

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

兼容 `vue-i18n@9.x`

如果需要查看 VueI18n的文档, 请点击这个链接去查看

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 的格式，将会使组件的文本失效. :::

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

如果您需要按需加载翻译文件，请查看按需加载

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 的方式加载语言文件

<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 使用

<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 内置了以下语言：

简体中文（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：只需在这里添加一个语言配置文件即可。

9.0 KiB Raw Blame History Unescape Escape

国际化