今回は、Vue で国語を切り替える方法と、Vue で国語を切り替える際の注意点を説明します。以下は実際のケースです。見てみましょう。
vue-cli ベースのプロジェクトの開発プロセスでは、多言語切り替え機能は vue-i18 プラグインを使用できます。具体的な実装方法は次のとおりです。
step1: vue-i18 プラグインをインストールします。プロジェクト内で
cnpm install vue-i18n --save-dev
step2: プロジェクト内で vue-i18n プラグインをエントリ ファイル main.js に導入します
import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages: { 'zh': require('./assets/lang/zh'), 'en': require('./assets/lang/en') } }) // vue实例中引入 /* eslint-disable no-new */ new Vue({ el: '#app', i18n, router, template: '<Layout/>', components: { Layout }, })
step3: ページとテンプレートで
を使用する場合、おそらく以下の3つの状況です
zh.js
module.exports = { menu : { home:"首页" }, content:{ main:"这里是内容" } }
en.js
module.exports = { menu : { home:"home" }, content:{ main:"this is content" } }
1) タグ内の本文コンテンツとして使用します
<p class="title">{{$t('menu.home')}}</p>
2) として使用しますタグ属性
<input :placeholder="$t('content.main')" type="text">
3) js中国語テキストとして使用する場合
console.log(this.$t('content.main'));
4) 追加予定...
step4 : ページ上で中国語と英語を切り替え、中国語と英語を切り替えるボタンにイベントをバインドします、次のように:
tabEn: function () { this.$i18n.locale = 'en' }, tabCn: function () { this.$i18n.locale = 'zh' }
この時点で、vue-i18n プラグインの使用は完了です。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
フロントエンドインターフェイスで DOM 要素の絶対位置を取得する方法
以上がVue で各国語を切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。