今回は、vue プロジェクトで vue-i18n と element-ui の国際展開を実現する方法と、vue プロジェクトで vue-i18n と element-ui の国際展開を実現するための 注意事項 についてお届けします以下に実際のケースを見てみましょう。
デフォルトでは、vue プロジェクトinstallvue-i18n と element-ui プラグイン
cnpm i vue-i18n --save-dev cnpm i element-ui --save-dev
で、以下に示すように、言語パックフォルダー i18n フォルダーを作成します
main.js に、i18n.js と element-ui プラグインを導入します
import Vue from 'vue' import App from './App' import router from './router' // element-ui import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element) // vuei18n import i18n from './i18n/i18n' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, i18n, components: { App }, template: '<App/>' })
i18n.js 内
import Vue from 'vue' import locale from 'element-ui/lib/locale' import VueI18n from 'vue-i18n' import messages from './langs' Vue.use(VueI18n) const i18n = new VueI18n({ locale: localStorage.lang || 'cn', messages, }) locale.i18n((key, value) => i18n.t(key, value)) export default i18n
フォルダー langs
index.js
import en from './en'; import cn from './cn'; export default { en: en, cn: cn }
en.js
import enLocale from 'element-ui/lib/locale/lang/en' const en = { message: { 'mes': 'hello', }, ...enLocale } export default en;
cn.js
import enLocale from 'element-ui/lib/locale/lang/zh-CN' const cn = { message: { 'mes': '你好', }, ...enLocale } export default cn;
この記事の事例を読んだ後、あなたはその方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がvue プロジェクトで vue-i18n と element-ui の国際展開を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。