element-plus/i18n.md at 47bc9f7f83eb61ab8006a5116d4b80b813923b59

mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-14 17:31:02 +08:00

* fix: fix i18n bundle error

* chore: update

* chore: update

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

9.5 KiB

Raw Blame History

国際化

Element Plus のデフォルト言語は英語です。他の言語を使用したい場合は、i18n の設定を行う必要があります。Element Plus を完全にインポートする場合のエントリーファイル:

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

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

if you are importing Element Plus on demand via es modules:

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

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

Or if you are importing Element Plus on demand via babel-plugin-component:

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

// configure language
locale.use(lang)

// import components
createApp(App).component(ElButton.name, ElButton)
createApp(App).component(ElSelect.name, ElSelect)

Set Day.js locale

Element Plus use date time locale (month name, first day of the week ...) from Day.js directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.

import locale from 'element-plus/lib/locale/lang/ja'
import 'dayjs/locale/ja'

// will auto set Day.js locale to 'ja'
app.use(ElementPlus, { locale })

However, you can use another Day.js locale if needed.

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

たとえ、別の言語を使っていても、英語パックはデフォルトでインポートされます。しかしながら、webpack で提供されている NormalModuleReplacementPlugin を使えばデフォルト locale を差し替えることが出来ます:

webpack.config.js

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

`vue-i18n@9.x` との互換性

Element vue-i18n@9.x は互換性があり、多言語切り替えをより簡単に出来ます。

Need translation

If you need to check out VueI18n documentation, please click this link to check it out.

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 property is critical, set this in order for ElementPlus translate strings correctly.
    el: enLocale.el,
    // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
    // Because that makes the ElementPlus internal translation invalid.
    message: {
      hello: 'hello world',
    },
  },
  [zhLocale.name]: {
    el: zhLocale.el,
    // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
    // Because that makes the ElementPlus internal translation invalid.
    message: {
      hello: '你好，世界',
    },
  },
  testLocale: {
    el: {},
    // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
  },
}

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

const app = createApp(App)

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

// Remember to use this plugin.
app.use(i18n)

他の i18n プラグインとの互換性

Element は vue-i18n 以外の i18n プラグインとは互換性がないかもしれませんが、Element がどのように i18n を処理するかをカスタマイズすることができます。

Need translation

:::tip Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like el.scope.subName, other wise the internal translation string will be raw string. :::

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'

// The is the signature of i18n method.
type i18n = (...args: any[]) => string
Vue.use(Element, {
  i18n: function(path, options) {
    // ...
  },
  // others.
})

オンデマンドコンポーネントのカスタム i18n

If you need to know how to lazy loading translation strings, please check this outLazy loading

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 property is critical, set this in order for ElementPlus translate strings correctly.
    el: enLocale.el,
    // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
    // Because that makes the ElementPlus internal translation invalid.
    message: {
      hello: 'hello world',
    },
  },
  [zhLocale.name]: {
    el: zhLocale.el,
    // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
    // Because that makes the ElementPlus internal translation invalid.
    message: {
      hello: '你好，世界',
    },
  },
  testLocale: {
    el: {},
    // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
  },
}

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/jp.js"></script>

<script>
  ElementPlus.locale(ElementPlus.lang.jp)
</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>
  // need translation
  const i18n = Vue18n.createI18n({
    locale: ElementPlus.lang.zhCN.name,
    fallbackLocale: ElementPlus.lang.en.name,
    messages: {
      [ElementPlus.lang.en.name]: {
        // el property is critical, set this in order for ElementPlus translate strings correctly.
        el: ElementPlus.lang.en.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
          hello: 'hello world',
        },
      },
      [ElementPlus.lang.zhCN.name]: {
        el: ElementPlus.lang.zhCN.el,
        // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
        // Because that makes the ElementPlus internal translation invalid.
        message: {
          hello: '你好，世界',
        },
      },
      testLocale: {
        el: {},
        // No message translations, it will fallback to en lang.
      },
    },
  })

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

現在、Element Plus は以下の言語をフォローしています。:

Simplified Chinese (zh-cn)
English (en)
German (de)
Portuguese (pt)
Spanish (es)
Danish (da)
French (fr)
Norwegian (nb-NO)
Traditional Chinese (zh-tw)
Italian (it)
Korean (ko)
Japanese (ja)
Dutch (nl)
Vietnamese (vi)
Russian (ru)
Turkish (tr)
Brazilian Portuguese (pt-br)
Farsi (fa)
Thai (th)
Indonesian (id)
Bulgarian (bg)
Polish (pl)
Finnish (fi)
Swedish (sv)
Greek (el)
Slovak (sk)
Catalunya (ca)
Czech (cs)
Ukrainian (uk)
Turkmen (tk)
Tamil (ta)
Latvian (lv)
Afrikaans (af)
Estonian (et)
Slovenian (sl)
Arabic (ar)
Hebrew (he)
Lithuanian (lt)
Mongolian (mn)
Kazakh (kk)
Hungarian (hu)
Romanian (ro)
Kurdish (ku)
Uighur (ug-cn)
Khmer (km)
Serbian (sr)
Basque (eu)
Kyrgyz (ky)
Armenian (hy-am)
Croatian (hr)
Esperanto (eo)

もしあなたのターゲット言語が含まれていない場合、貢献することは大歓迎です: 別の言語の設定を追加してここで、プルリクエストを作成してください。

9.5 KiB Raw Blame History Unescape Escape

国際化