国际化

国际化

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@5.x

Element 兼容 vue-i18n@5.x，搭配使用能更方便地实现多语言切换。

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@5.x，而是用其他的 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) { // ... } }) 

¶兼容 vue-i18n@6.x

默认不支持 6.x 的 vue-i18n，你需要手动处理。

import Vue from 'vue'
import Element from 'element-ui' import VueI18n from 'vue-i18n' import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'element-ui/lib/locale/lang/zh-CN' Vue.use(VueI18n) const messages = { en: { message: 'hello', ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale) }, zh: { message: '你好', ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale) } } // Create VueI18n instance with options const i18n = new VueI18n({ locale: 'en', // set locale messages, // set locale messages }) Vue.use(Element, { i18n: (key, value) => i18n.t(key, value) }) new Vue({ i18n }).$mount('#app') 

¶按需加载里定制 i18n

import Vue from 'vue'
import DatePicker from 'element/lib/date-picker' import VueI18n from 'vue-i18n' import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'element-ui/lib/locale/lang/zh-CN' import ElementLocale from 'element-ui/lib/locale' Vue.use(VueI18n) Vue.use(DatePicker) const messages = { en: { message: 'hello', ...enLocale }, zh: { message: '你好', ...zhLocale } } // Create VueI18n instance with options const i18n = new VueI18n({ locale: 'en', // set locale messages, // set locale messages }) ElementLocale.i18n((key, value) => i18n.t(key, value)) 

¶通过 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）
• 瑞典语（sv-SE）
• 希腊语（el）
• 斯洛伐克语（sk）
• 加泰罗尼亚语（ca）
• 捷克语（cs-CZ）
• 乌克兰语（ua）
• 土库曼语（tk）
• 泰米尔语（ta）
• 拉脱维亚语（lv）
• 南非荷兰语（af-ZA）
• 爱沙尼亚语（ee）
• 斯洛文尼亚语（sl）
• 阿拉伯语（ar）
• 希伯来语（he）
• 立陶宛语（lt）
• 蒙古语（mn）
• 哈萨克斯坦语（kz）
• 匈牙利语（hu）
• 罗马尼亚语（ro）
• 库尔德语（ku）

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

转载于:https://www.cnblogs.com/grt322/p/8531874.html