vue国際化i18nの使用を記録する

vueフレームワークが複数の言語を考慮している場合は、vue-i18nを使用できます。これをインストールするには、npm install vue-i18n --saveを使用して、依存ライブラリを現在のvueプロジェクトに直接追加します。さらに、多言語ファイルを構成する必要があります。ここでは例として中国語と英語を使用します。assetsディレクトリの下に新しい言語ディレクトリを作成し、次に、それぞれの言語に対応する国際化ファイルを格納するために使用される新しいzh.jsonとen.jsonを作成します。

多言語ファイルはjson形式であるため、自然にオブジェクトとオブジェクトのネストを含めることができますここでは、オブジェクトの属性とネストによって多言語ファイルを編成します。内容は次のとおりです。

zh.json

{
	"common":{
		"name":"用户名",
		"password":"密码"
	},
	"Settings":{
		"set":"设置",
		"ok":"确定",
		"cancel":"取消",
		"languageSelect":"语言选择"
	}
}

en.json

{
	"common":{
		"name":"username",
		"password":"password"
	},
	"Settings":{
		"set":"Set",
		"ok":"Ok",
		"cancel":"Cancel",
		"languageSelect":"Language Select"
	}
}

2つのドキュメントの内容は1対1の対応が最適ですが、理論的には両側の内容のみを照合できます。

次に、ページにvue-i18nを導入する方法として、vueマウントオブジェクトにi18nオブジェクトを追加する必要があります。ここでは例として、通常のvueプロジェクトを取り上げます。main.jsファイルでは、「vue-i18n」からVue-I18nをインポートしてi18nをインポートします。次に、Vue.use（Vue-I18n）を使用して、vueプロジェクトで示す必要がありますi18nを使用するには、前に構成した国際化ファイルをインポートし、最後にそれをvueマウントポイントに追加する必要があります。コードは次のとおりです。

import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'

Vue.config.productionTip = false
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('@/assets/languages/zh.json'),
    'en': require('@/assets/languages/en.json')
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

ここで、デフォルトの言語は中国語なので、i18n.locale = 'zh'を設定する必要があることに注意してください。このようにして、すでに準備が完了しています。残りは、ページで複数の言語を使用する方法です。通常、HTML要素タグの本文では、中かっこ{{}}を追加し、$ t（ 'Settings.set'）、JavaScriptコードでは、中括弧は必要ありません。$ t（ "Settings.set"）だけです。

言語を設定するページを追加しました。内容は次のとおりです。

Settings.vue

<template>
  <div class="setting">
    <h2>{{$t('Settings.languageSelect')}}</h2>
    <button @click="changeZh">中文</button>
    <button @click="changeEn">English</button>
  </div>
</template>
<script>
export default {
  name: 'Settings',
  data () {
    return {}
  },
  methods: {
    changeZh () {
      this.$i18n.locale = 'zh'
    },
    changeEn () {
      this.$i18n.locale = 'en'
    }
  }
}
</script>

言語設定ページは非常にシンプルです。2つのボタンがあり、クリックして言語を切り替えます。ここで言語を切り替えるには、i18n.localeの値を変更します。前述のとおり、デフォルトは「zh」です。英語に変更されている場合は、enです。 '。言語が変更されると、ページのコンテンツが変更されます。実際の操作の効果を見てみましょう：

vue-i18n多言語、実際には、主に2つの場所に焦点を当てています。1つはHTMLタグの本文にあり、{{$ t（ 'Settings.set'）}}を使用する方法であり、もう1つは直接$ t（JavaScriptコードで）を使用する方法ですSettings.set '）。それらの違いは、ラベル本体の二重中括弧{{}}です。

ルフィ5459

529件の元の記事を公開・ 287 件を賞賛・ 144万回の再生

彼のメッセージボードの懸念

vue国際化i18nの使用を記録する

おすすめ