VUEアプリの國(guó)際化とローカリゼーションは、主にVUE I18Nプラグインを使用して処理されます。 1。NPMまたは糸を介してVUE-I18Nをインストールします。 2。翻訳メッセージのLocale jsonファイル（En.json、es.jsonなど）を作成します。 3.ロケール構(gòu)成とメッセージファイルを使用して、main.jsでi18nインスタンスを設(shè)定します。 4。$ T（ 'key'）を使用してテンプレート內(nèi)の翻訳にアクセスします。 5.翻訳キーを一貫して管理し、スケーラビリティのために深いネスティングを避けます。 6.実行時(shí)にロケールプロパティを更新して、動(dòng)的に言語(yǔ)を切り替えます。 7.ユーザー優(yōu)先保持のために、ローカルストレージで選択された言語(yǔ)を保持します。 8。$ t（ 'hellouser'、{name： 'alice'}）のような可変噴射で翻訳で動(dòng)的値を使用します。 9. I18N構(gòu)成に複數(shù)化ルールを?qū)g裝し、適切な複數(shù)の処理に$ TC（）を使用します。 10。RTLサポートや日付のフォーマットなどの高度なニーズについては、INTLや日付FNSなどのライブラリを統(tǒng)合して、完全なローカリゼーションカバレッジを確保します。

VUEアプリの國(guó)際化（I18N）とローカリゼーション（L10N）は、主に2つのことになります。ユーザーの言語(yǔ)の好みに基づいてコンテンツを切り替え、テキスト、日付、數(shù)字、その他のロケール固有の要素が正しく表示されることを確認(rèn)します。これを行う最も一般的で強(qiáng)力な方法は、VUEアプリ用に特別に構(gòu)築されたプラグインであるVue I18Nを使用することです。

VUE I18Nのセットアップ

開(kāi)始するには、npmまたは糸を介してvue-i18nをインストールします。

 NPMインストールVUE-I18N@9

インストールしたら、ロケールメッセージファイル（ en.json 、 es.jsonなど）を作成し、アプリエントリポイント（ main.jsまたは同様）でi18nインスタンスを設(shè)定します。

 'vue'から{createapp}をインポート
'vue-i18n'から{createi18n}をインポート
'./app.vue'からアプリをインポートする
'./locales/en.json'からのインポート '
'./locales/es.json'からesをインポート

const i18n = createi18n（{
  レガシー：虛偽、
  ロケール： 'en'、
  Fallbacklocale： 'en'、
  メッセージ：{
    en、
    es
  }
}）

createapp（app）.use（i18n）.mount（ '＃app'）

これで$t('key')を使用して、テンプレート內(nèi)のどこにでも翻訳にアクセスできます。

翻訳ファイルを効果的に管理します

文字列を直接コンポーネントに直接コードする代わりに、次のような構(gòu)造化されたJSONファイルに保管してください。

en.json

 {
  「ようこそ」：「ようこそ！」
  "ボタン"： {
    「送信」：「送信」
  }
}

es.json

 {
  「ようこそ」： "?Bienvenido！"、
  "ボタン"： {
    「送信」：「eviar」
  }
}

これにより、アプリが成長(zhǎng)するにつれて維持と拡張が容易になります。また、 PoeditorやCrowdinなどのツールを使用して、複數(shù)の言語(yǔ)やチームを操作する場(chǎng)合の翻訳の管理を支援することもできます。

いくつかのヒント：

• キーをロケール間で一貫性を保ちます。
• 必要でない限り、深くネストされた構(gòu)造を避けてください。
• チームが開(kāi)発者以外の場(chǎng)合は、別のファイルまたはツールでコメントを使用します。

言語(yǔ)を動(dòng)的に切り替えます

実行時(shí)にアプリの言語(yǔ)を変更するのは簡(jiǎn)単です。 i18nインスタンスのlocaleプロパティを更新するだけです。

 'vue-i18n'から{usei18n}をインポート

デフォルトのエクスポート{
  設(shè)定（） {
    const {locale} = usei18n（）

    function changelang（newlang）{
      locale.value = newlang
    }

    return {locale、changelang}
  }
}

テンプレートで：

 <ボタン @click = "changelang（ &#39;es&#39;）">espa?ol</button>

これにより、アプリ內(nèi)のすべてのローカライズされたテキストが即座に切り替わります。また、選択した言語(yǔ)をローカルストレージに保持することもできます。そうすることで、ユーザーが訪問(wèn)するたびに切り替える必要はありません。

動(dòng)的および複數(shù)形のコンテンツの処理

翻訳された文字列に変數(shù)を注入したり、複數(shù)形を処理する必要がある場(chǎng)合があります。 Vue I18Nは両方をサポートしています。

動(dòng)的値の使用：

あなたのJSONで：

 「Hellouser」：「こんにちは、{名前}！」

あなたのコンポーネントで：

 <p> {{$ t（ &#39;hellouser&#39;、{name： &#39;alice&#39;}）}} </p>

複數(shù)化：

i18n構(gòu)成で複數(shù)ルールを設(shè)定します：

 const i18n = createi18n（{
  レガシー：虛偽、
  ロケール： 'en'、
  Fallbacklocale： 'en'、
  luluralrules：{
    en ：（選択、選択肢）=> {
      if（choiceslength === 2）{
        return choice> 1？ 1：0
      }
      選択した選択？ 1：0
    }
  }、
  メッセージ：{
    en、
    es
  }
}）

それからあなたのJSONで：

 「項(xiàng)目選択」：「{count}アイテムを選択しました| {count}アイテムを選択しました」

そしてあなたのテンプレートで：

 <p> {{$ tc（ &#39;itemselected&#39;、itemcount、{count：itemcount}）}} </p>

これにより、複數(shù)のルールが異なる異なる言語(yǔ)でUIが自然に感じられるようになります。

それは基本的に、Vueでi18nとl10nがどのように機(jī)能するかです。構(gòu)造を配置したら、それほど複雑ではありませんが、RTL言語(yǔ)、日付のフォーマット、通貨処理などのエッジケースを見(jiàn)落とすのは簡(jiǎn)単です。それらのために、 date-fnsやIntlなどのライブラリとの統(tǒng)合を検討してください。しかし、ほとんどの標(biāo)準(zhǔn)的なニーズのために、Vue I18Nはそれをかなりうまくカバーしています。

以上がVUEアプリケーションで國(guó)際化（I18N）とローカリゼーション（L10N）をどのように実裝できますか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。