## 国際化 Element Plusのデフォルト言語は中国語です。他の言語を使用したい場合は、i18nの設定を行う必要があります。Element Plusを完全にインポートする場合のエントリーファイル: ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import locale from 'element-plus/lib/locale/lang/en' Vue.use(ElementUI, { locale }) ``` または Element Plusをインポートする際は必要に応じて以下の記述します。: ```javascript import Vue from 'vue' import { Button, Select } from 'element-plus' import lang from 'element-plus/lib/locale/lang/en' import locale from 'element-plus/lib/locale' // configure language locale.use(lang) // import components Vue.component(Button.name, Button) Vue.component(Select.name, Select) ``` たとえ、別の言語を使っていても、中国語パックはデフォルトでインポートされます。 しかしながら、webpackで提供されている `NormalModuleReplacementPlugin` を使えばデフォルトlocaleを差し替えることが出来ます: webpack.config.js ```javascript { plugins: [ new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-plus/lib/locale/lang/en') ] } ``` ## `vue-i18n@5.x` との互換性 Element [vue-i18n@5.x](https://github.com/kazupon/vue-i18n) は互換性があり、 多言語切り替えをより簡単に出来ます。 ```javascript import Vue from 'vue' import VueI18n 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 app = createApp(App) app.use(ElementPlus) Vue.use(VueI18n) Vue.config.lang = 'zh-cn' Vue.locale('zh-cn', zhLocale) Vue.locale('en', enLocale) ``` ## 他のi18nプラグインとの互換性 Elementはvue-i18n以外のi18nプラグインとは互換性がないかもしれませんが、Elementがどのようにi18nを処理するかをカスタマイズすることができます。 ```javascript 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' Vue.use(Element, { i18n: function (path, options) { // ... } }) ``` ## `vue-i18n@6.x` との互換性 `6.x`との互換性を保つためには、手動で処理する必要があります。 ```javascript import Vue from 'vue' import ElementPlus from 'element-plus' import VueI18n from 'vue-i18n' import enLocale from 'element-plus/lib/locale/lang/en' import zhLocale from 'element-plus/lib/locale/lang/zh-CN' Vue.use(VueI18n) const messages = { en: { message: 'hello', ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)` }, zh: { message: '你好', ...zhLocale // Or use `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 ```js import Vue from 'vue' import DatePicker from 'element/lib/date-picker' import VueI18n from 'vue-i18n' 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' 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を経由してインポート ```html ``` `vue-i18n` との互換性 ```html ``` 現在、Elementは以下の言語をフォローしています。: もしあなたのターゲット言語が含まれていない場合、貢献することは大歓迎です: 別の言語の設定を追加して [ここで](https://github.com/ElemeFE/element/tree/dev/src/locale/lang)、プルリクエストを作成してください。