zoukankan      html  css  js  c++  java
  • 国际化


    国际化

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

  • 相关阅读:
    SCAU 9504 面试
    SCAU 9503 懒人选座位
    SCAU 8628 相亲
    SCAU 10691 ACM 光环
    SCAU 8626 原子量计数
    SCAU 10674 等差对
    HDU ACM 1048 The Hardest Problem Ever (水题)
    SCAU 9502 ARDF
    SCAU 10686 DeathGod不知道的事情
    SCAU 8629 热身游戏(高精度)
  • 原文地址:https://www.cnblogs.com/grt322/p/8531874.html
Copyright © 2011-2022 走看看