element/examples/docs/zh-CN/i18n.md
Leopoldthecoder 3243b8fc98 Merge branch 'dev' into 1.2-merge1
# Conflicts:
#	package.json
#	src/utils/popup/index.js
#	yarn.lock
2017-02-09 17:33:42 +08:00

3.6 KiB
Raw Blame History

国际化

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

// 完整引入 Element
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })

// 按需引入 Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

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

// 引入组件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

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

webpack.config.js

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

兼容 vue-i18n

Element 兼容 vue-i18n,搭配使用能更方便地实现多语言切换。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)
Vue.use(Element)

Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)

兼容其他 i18n 插件

如果不使用 vue-i18n,而是用其他的 i18n 插件Element 将无法兼容,但是可以自定义 Element 的 i18n 的处理方法。

import Vue from 'vue'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(Element, {
  i18n: function (path, options) {
    // ...
  }
})

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

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>

<script>
  ELEMENT.locale(ELEMENT.lang.en)
</script>

搭配 vue-i18n 使用

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>

<script>
  Vue.locale('en', ELEMENT.lang.en)
  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>

目前 Element 内置了以下语言:

  • 简体中文zh-CN
  • 英语en
  • 德语de
  • 葡萄牙语pt
  • 西班牙语es
  • 丹麦语da
  • 法语fr
  • 挪威语nb-NO
  • 繁体中文zh-TW
  • 意大利语it
  • 韩语ko
  • 日语ja
  • 荷兰语nl
  • 越南语vi
  • 俄语ru-RU
  • 土耳其语tr-TR
  • 巴西葡萄牙语pt-br
  • 波斯语fa
  • 泰语th
  • 印尼语id
  • 保加利亚语bg
  • 波兰语pl
  • 芬兰语fi

如果你需要使用其他的语言,欢迎贡献 PR只需在 这里 添加一个语言配置文件即可。