i18n を使用して Vue で多言語切り替えを実装するためのヒント

国際化の継続的な発展に伴い、多言語切り替え機能をサポートする必要がある Web サイトやアプリケーションがますます増えています。人気のあるフロントエンド フレームワークとして、Vue は多言語切り替えの実現に役立つ i18n と呼ばれるプラグインを提供します。この記事では、i18n を使用して Vue で多言語切り替えを実現するための一般的なテクニックを紹介します。

ステップ 1: i18n プラグインをインストールする

まず、npm または Yarn を使用して i18n プラグインをインストールする必要があります。コマンド ラインに次のコマンドを入力します:

npm install vue-i18n --save

または

yarn add vue-i18n

ステップ 2: i18n を構成する

Vue プロジェクトでは、main.js に i18n を導入する必要があります。そしていくつかの基本的な設定を行います。例は次のとおりです。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'en-us', // 默认语言为英语
    fallbackLocale: 'zh-cn', // 如果当前语言没有在 locale 对象中找到，则使用 fallbackLocale 作为备选语言
    messages: {
        'zh-cn': require('./locales/zh-cn.json'),
        'en-us': require('./locales/en-us.json')
    }
})

上記のコードでは、new VueI18n() を通じて i18n オブジェクトをインスタンス化し、デフォルトの言語ロケール「en-us」と、代替言語の fallbackLocale は「zh-cn」です。 messages 属性は、サポートする必要があるすべての言語をリストするオブジェクトであり、JSON ファイルを使用して各言語に対応する翻訳情報を保存します。

上記のコードでは、中国語の翻訳情報を locales/zh-cn.json ファイルに保存し、英語の翻訳情報を locales/en-us.json ファイルに保存します。次に、これら 2 つのファイルの翻訳情報をそれぞれ入力する必要があります。

ステップ 3: 言語翻訳情報を入力します

locales/zh-cn.json ファイルに、次の方法で翻訳情報を記述できます:

{
    "Welcome": "欢迎使用 Vue",
    "Hello": "你好，世界！"
}

locales/ では、en-us.json ファイルに、次の方法で翻訳情報を記述することができます:

{
    "Welcome": "Welcome to Vue",
    "Hello": "Hello, world!"
}

上の例では、「Welcome」と「Hello」が翻訳キーであり、次の文字列が続きます。翻訳されたテキスト (値) です。

注: コンテンツの翻訳方法の詳細については、翻訳リソースをご自身で見つけてください。

ステップ 4: 翻訳情報を使用する

i18n が設定されたら、Vue.js コンポーネントで翻訳情報を使用できます。サンプルコードでは、 $t() メソッドを使用して翻訳を実装します。翻訳する必要があるテキストの前に $t() メソッドを追加するだけです。

サンプル コードは次のとおりです:

<template>
  <div>
    <h1 id="t-Welcome">{{$t('Welcome')}}</h1>
    <p>{{$t('Hello')}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

上記のコードでは、両方のテキスト ブロックが $t() メソッドと、「ようこそ」と「こんにちは」を使用して翻訳されていることがわかります。 JSON ファイルで定義されている変換キーです。

現在の言語を変更する場合は、コンポーネント内でメソッドを定義して、$i18n.locale プロパティを更新できます。たとえば、英語に切り替えたい場合は、次のコードで切り替えることができます:

this.$i18n.locale = 'en-us'

ステップ 5: 構文シュガーを使用する

Vue-i18n では、一部の処理を簡素化するためにいくつかの構文シュガーも提供されています。一般的なユースケースの実現。

たとえば、$t() メソッドを使用して、変数を含む翻訳されたテキストを表示できます。例:

<template>
  <div>
    <h1 id="t-Welcome-name-userName">{{ $t('Welcome', { name: userName }) }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userName: 'Alice'
    }
  },
}
</script>

上の例では、Vue コンポーネントの data() メソッドを使用して userName という名前の変数を定義し、$t() メソッドの 2 番目のパラメーターでその変数を参照します。たとえば、「ようこそ、アリス!」のようなテキストを動的に翻訳します。

概要

i18n プラグインの使用は、Vue で多言語切り替えを実装する一般的な方法です。 i18n プラグインを使用して構成と言語翻訳情報を完了したら、コンポーネントの $t() メソッドを使用して翻訳されたテキストを表示できます。実装中に、糖衣構文を使用して一般的なユースケースを簡素化することもできます。この記事が、Vue.js で i18n を使用する方法をより深く理解するのに役立つことを願っています。

以上がi18n を使用して Vue で多言語切り替えを実装するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。