Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

フロントエンドの国際化は一般的な要件です。しかし、この点に関してインターネット上で直接利用できる解決策は多くありません。最近、Vue.js をベースにした多言語実装を作成したので、ここで簡単に概要を説明したいと思います。

1. 通常どのようなコンテンツを処理する必要があるか

一般的に、Web アプリケーションでは、複数の言語間で切り替える必要があるコンテンツには、次のような側面が含まれることがよくあります。

1. テンプレート内のコンテンツ（Vue.jsの<template>タグ内のテキストコンテンツなど）

2. JSコード内のテキストコンテンツ

3. 写真のコピーの内容

4. ページタイトル

5. サードパーティコンポーネントのコピーライティング（たとえば、私のプロジェクトでは Vux コンポーネントが使用されています）

6. バックエンドインターフェースでフロントエンドに表示する必要があるデータコンテンツ

7. バックエンドインターフェースから返されたエラーメッセージ

2. 基本的な考え方

1. まず、現在表示すべき言語を取得する方法を決定する必要があります。

URL に ?lang=en や ?lang=zh-CN などのパラメータを渡す方法を使用します。これの利点は、リンクを通じて使用する言語を指定できることです。ただし、アドレスバーのパラメータだけに頼るのも不便です。たとえば、ページがジャンプすると、アドレス バーのパラメーターが失われる可能性があります。これにより、ページがジャンプした後にどの言語が表示されるかがわからなくなります。理想的な方法は、特定のページに入るときにこのパラメータを設定することです (この時点で、どの言語を使用するかがわかります)。その後、どの言語を使用するかが既にわかっているため、他のページにジャンプするときにこの lang パラメータを設定する必要はありません。したがって、このパラメータは、最初のページに入るとすぐに、たとえばローカルストレージまたは vuex の状態に保存する必要があります。

これにより、言語判断における優先順位の問題が浮上します。

アドレスバーに lang パラメータがある場合や、localstorage に関連するストレージ フィールドがある場合（アプリケーションが前回アクセスされたため）、デフォルトのフォールバック言語などを設定する必要がある場合もあります。その優先順位はどのように扱われるべきでしょうか?

正しい優先順位は次のとおりです。

まず、アドレスバーにパラメータがあるかどうかを確認します。

ローカルストレージに何かあるかどうかを確認します。

次に、navigator.language を通じてブラウザのデフォルト言語を取得し、それがアプリケーションでサポートされている言語であるかどうかを確認します。サポートされている場合は、それを使用します。

フォールバック言語（より一般的な英語など）は最後の手段として使用されます。

もちろん、ニーズに合わせてこれを簡素化することもできます。

2. 次に、言語変換とパッケージ化の問題を解決するためにどのようなツールが使用されますか?

（１）i18n関連ツールの選定 - 多言語変換機能（通常は$t）は誰が提供するのか？

現在、最も一般的な国際化方法は i18n に基づいているため、車輪の再発明をする必要はありません。しかし、i18n の特定の用途には、さまざまな NPM モジュールが存在します。たとえば、vuex-i18n、vue-i18n、simplest-i18n などです。ほとんどの複雑なプロジェクトでは vuex が使用されるため、複雑なプロジェクトでは vue-i18n よりも vuex-i18n を選択する方が便利です。

非常にニッチなモジュールである最もシンプルな i18n モジュールには、実際に利点があります。以下をサポートします:

テンプレート内:

<span>$t('本名', '本名')</span>

または JS の場合:

this.$t('本名', '本名')

つまり、言語が一緒に書かれており、$t関数の各パラメータが言語であるため、一目でわかり、比較的読みやすいです。小規模なプロジェクトの場合、これはオプションです。

基本的な使い方は次のとおりです。

t.js ファイル:

'simplest-i18n' から i18n をインポートします。
'../../getLang' から getLang をインポートします。

定数t = i18n({
  locale: getLang.lang, // 現在の言語 locales: getLang.langs // サポートされている言語リスト });
デフォルト t をエクスポートします。

次に、アプリケーションのエントリ ファイルで Vue.js を拡張します。

'./t' から t をインポートします。
Vue.$t = Vue.prototype.$t = t;

これにより、$t メソッドがグローバル Vue.js にマウントされます。 Vue インスタンス内の this.$t を通じてアクセスすることもできます。使い方は非常に簡単です。

ただし、大規模なプロジェクトの場合、すべての言語パッケージをコード内に記述するのはメンテナンスが容易ではありません。さらに、私が使用している Vux コンポーネントの多言語問題も解決できません。

結局、私は vuex-i18n をベースとして選択しました。

（２）言語パッケージを整理・処理するためのツール：言語パッケージをどのように整理・パッケージ化するか？

この問題では、まず Vux サードパーティ コンポーネントの多言語化問題を解決する必要があります。

まず、言語パックの構成に関しては、JSON 構成ファイルとして記述するのが一般的です。しかし、最終的には、多言語フィールドを一緒に記述することをサポートする YAML 形式を採用しました。例えば：

config.yml

確認する：
  確認する

たとえば、次に示すように、フィールドの多言語を複数の部分に分割する代わりに、

確認する：

確認: 確認

これの利点は、フィールドの異なる言語バージョンを簡単に比較できること、そしてフィールドを変更または削除したいときに、切り替えることなく 1 か所で実行できることです。さらに、YAML ファイルの構文はよりシンプルで明確になり、JSON ファイルで二重引用符を使用する必要性やコメントの禁止など、多くの問題が解消されます。

次に、言語パックのパッケージ化に関しては、vux-loader を見つけました。既存の webpack 構成と組み合わせることができ、Vux コンポーネントの多言語構成のパッケージ化が完了するだけでなく、カスタム Vue コンポーネントで <i18n> タグを使用することもできます。たとえば、カスタム コンポーネントでは次のように記述できます。

<i18n>
確認する：
  確認する
<i18n>

パッケージ化時に、vux-loader は <i18n> タグ内の多言語構成情報を設定した YAML ファイルにエクスポートし、カスタム コンポーネントから <i18n> タグを削除します。

では、YAML ファイルをどのように扱えばよいのでしょうか? json-loader と yaml-loader を使用できます。これらは、Yaml ファイルを必要な json 形式に変換できるため、次のように JS 関数で使用するのに便利です。

const componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml'); // これはjson形式で言語パックを取得します

3. バックエンド インターフェイスに、どの言語でデータを返すかを通知するにはどうすればよいですか?

多くのインターフェースが関係しており、バックエンドにどの言語を使用するかを通知する必要があるため、ヘッダー メソッドを使用することを選択しました。 axios インターセプターでは、リクエストに Accept-Language ヘッダーが追加され、このヘッダーの値はフロントエンドが使用する言語 (zh-CN や en など) に設定されます。この方法では、問題を 1 か所で解決できます。

3. 具体的な実践の詳細

1. 現在使用すべき言語のgetLangモジュールの実装を取得する

'../utils/url' から { getQueryObj } をインポートします。
'../utils/storage' から { setItem、getItem } をインポートします。

const langs = ['zh-CN', 'en']; // サポートされている言語 const defaultLang = 'en'; // デフォルトの言語、まだ破棄されていません function getLang() {
  クエリを getQueryObj() にします。
  storeLang = getItem('lang'); を取得します。
  rawLang を使用します。
  フラグを false にします。

  if (クエリ && クエリ['lang']) {
    rawLang = クエリ['lang'];
    アイテムを設定します('lang', rawLang);
  } それ以外 {
    rawLang = storeLang || navigator.language;
  }

  langs.map(item => {
    if (item === rawLang) {
      フラグ = true;
    }
  });
  戻りフラグ?rawLang:defaultLang;
}

const lang = getLang(langs, defaultLang);

エクスポートデフォルト{
    lang, // 現在の言語を取得 langs // サポートされている言語のリスト ​​}

2. Vuxコンポーネントの多言語パッケージの構成

Vux の公式 github から src/locales/all.yml を見つけてコピーし (同じディレクトリ内の src/locales/zh-CN.yml と src/locales/en.yml はそれぞれ中国語と英語の部分です)、必要に応じて少し変更します。

次に、それをアプリケーションのエントリ ファイルにインポートします。

const vuxLocales = require('json-loader!yaml-loader!../../locales/all.yml');

3. vux-loaderの設定

webpack.dev.conf.js:

解決(vuxLoader.merge(devWebpackConfig, {
    プラグインディレクトリ: [
        'vux-ui'、
        {
            名前: 'i18n',
            vuxStaticReplace: 偽、
            静的置換: false、
            抽出先ファイル: 'src/locales/components.yml',
            ロケールリスト: ['en','zh-CN']
        }
    ]
}))

webpack.prod.conf.js:

解決(vuxLoader.merge(buildWebpackConfig, {
    プラグインディレクトリ: [
        'vux-ui'、
        {
            名前: 'i18n',
            vuxStaticReplace: 偽、
            静的置換: false、
            抽出先ファイル: 'src/locales/components.yml',
            ロケールリスト: ['en','zh-CN']
        }
    ]
}))

localeList: ['en','zh-CN'] は、アプリケーションがサポートする言語を指定します。

extractToFiles: 'src/locales/components.yml' は、カスタム コンポーネントで使用される <i18n> タグ内の言語パック情報をエクスポートする YAML ファイルを指定します。つまり、各カスタム コンポーネントで使用される <i18n> タグ内の言語パック情報は、vux-loader によってこのファイルに集中的に抽出されます。

次に、この言語パック ファイルをアプリケーションのエントリ ファイルにインポートします。

定数 componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml');

4. カスタムコンポーネント内外のテキストの多言語化

（１）カスタムコンポーネント内のテキストの多言語情報は、コンポーネントの<i18n>タグ内に記述するだけです。同時に、異なるカスタム コンポーネント内の多言語フィールド間での名前の競合を回避するために、各フィールドの名前にコンポーネント名スタイルのプレフィックスを追加します。

（2）ページタイトルや一部のエラーメッセージなどのテキストはコンポーネントの外側に表示されるため、コンポーネントの<i18n>タグ内に記述するのは適切ではありません。そのため、これらのグローバル多言語情報を保存するために、別のglobal.ymlファイルを作成します。これらの内容は global.yml に直接記述することができ、他の言語パックのフィールドとの競合を避けるために、各フィールドの前に global- プレフィックスを追加します。

次に、この言語パック ファイルをアプリケーションのエントリ ファイルにインポートします。

定数 componentsLocales = require('json-loader!yaml-loader!../../locales/global.yml');

5. vuex-i18nの実装

src/store/index.js ファイル内:

'vuex-i18n' から VuexI18n をインポートします。

エクスポートのデフォルトの新しい Vuex.Store を追加します。

    i18n: VuexI18n.store

アプリケーションのエントリ ファイル内:

'vuex-i18n' から VuexI18n をインポートします。
'../../getLang' から getLang をインポートします。

Vue.use(VuexI18n.plugin、ストア);

const vuxLocales = require('json-loader!yaml-loader!../../locales/all.yml');
定数 componentsLocales = require('json-loader!yaml-loader!../../locales/components.yml');

定数finalLocales = {
  'en': オブジェクト.assign(vuxLocales['en'], componentsLocales['en']),
  'zh-CN': Object.assign(vuxLocales['zh-CN'], componentsLocales['zh-CN'])
}

for (let i in finalLocales) {
  Vue.i18n.add(i, 最終ロケール[i])
}

Vue.i18n.set(globalVars.lang);

6. 画像の多言語化

画像内のテキスト情報を多言語化するには、主に 2 つの方法があります。1 つは、異なる言語に応じて異なる画像を表示することです。もう 1 つは、テキストを画像の背景からできるだけ分離し、テキスト レイヤーと背景画像レイヤーの方法を使用して、テキスト レイヤーを通常のテキストとして使用して多言語化を実現することです。これらはすべて比較的単純なので、詳しく説明しません。

7. 現在のページのボタンを使用して現在の言語を切り替えた後、現在のページのコンテンツを更新するにはどうすればよいですか?

アプリケーションがページ内で言語バージョンを切り替える必要がない場合は、URL で異なる lang パラメータを直接渡すことができ、この問題は発生しません。

最初の方法: ページを更新する

<button @click="changeLang('zh-CN')">中国語</button>
<button @click="changeLang('en')">英語</button>

言語を変更する(lang){
    location.href = this.$utils.url.replaceParam(this.$router.history.current.path, 'lang', lang);
},

2 番目の方法: 現在のページ データの lang フィールドの変更を監視し、v-if を通じて関連するコンポーネントの一部を部分的に更新します。

データ（）{
    戻る {
        言語: this.$i18n.locale()
    }
}

言語を変更する(lang){
    this.$i18n.set(lang);
    this.lang = this.$i18n.locale();
},

時計：
    lang(新しい値、古い値) {
        新しい値 === 古い値の場合
            戻る;
        }

        //ここでフラグを変更し、v-if と組み合わせてローカル コンポーネントの再レンダリングをトリガーします}
}

3 番目の方法: vuex を組み合わせてグローバル言語ステータスをディスパッチし、ステータスが変更されたときに更新するか、vuex-i18n の実装を自分で書き直すだけです。この方法は比較的複雑です。

ビジネスニーズに応じて選択してください。

8. YAMLにおける特殊文字のエスケープ

[、]などの特殊文字を含む一部のYAMLキー値については、エスケープする必要があります。変換する方法は、キー値に一重引用符を追加することです。

言語パックの情報に一重引用符が含まれている場合は、2 つの連続した一重引用符を使用してエスケープする必要があります。例えば：

str: '労働者の日'

要約する

これで、Vue.js フロントエンド多言語ソリューションのアイデアと実践に関するこの記事は終了です。Vue.js フロントエンド多言語に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。