Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

序文

最近、プロジェクトで Vue3 を使用した後に多くの問題が発生し、ギャップを埋めるのが困難であると不満を言う人がいます。開発中に、一部のサードパーティ ライブラリが Vue3 バージョンを起動していないことに気付いた人もいます。そのため、多くの不満が寄せられ、Vue3 を使用しないように強く推奨されています。

技術的な予備調査と互換性調査をきちんと行うことは、特に新しい技術やメジャー バージョン アップデートを開発する前の作業の 1 つです。よほどの勇気がない限り、十分な予備調査を行わずに正式なプロジェクトで使用しないでください。

最近、Vue3 プロジェクトの 1 つを国際設定に接続しています。全体的なプロセスは Vue2 とそれほど変わりません。ここで私の技術的な経験を共有したいと思います。

vue-i18nをインストールする

npm i vue-i18n --save

ここでは、国際化と多言語切り替えを実装するために Vue-i18n が使用されています。i18n という名前は、実際には英語の単語 internationalization の最初と最後の文字と、真ん中の数字 18 で構成されており、「国際化」を意味します。

ロケールの設定

プロジェクトの src に新しい locales フォルダーを作成し、その中に新しい language フォルダーを作成して、各言語のテキスト構成を保存します。言語に en および zh-CN フォルダーを作成し、それに応じて index.js を作成し、次のコンテンツを入力します。

// src/locales/language/zh_CN/index.js

エクスポートデフォルト{

    タイトル: 「中国語タイトル」、

}

// src/locales/language/en/index.js

エクスポートデフォルト{

    タイトル:「英語タイトル」、

}

getLangs.js の実装

ロケールに新しい getLangs.js ファイルを作成し、言語フォルダー内の言語パッケージを取得して公開します。
ここでは lodash-es プラグインが使用されているため、インストールする必要があります。

npm と lodash-es --save

具体的なコードは次のとおりです。

'lodash-es' から {set} をインポートします

const モジュール = import.meta.globEager('./language/**/*.js')

関数 getLanguages(langs, prefix = 'lang') {

  定数オブジェクト = {}

  Object.keys(langs).forEach((キー) => {

    const mod = langs[キー].default

    k = key.replace(`./${prefix}/`, '').replace(/^\.\//, '') とします。

    定数 lastIndex = k.lastIndexOf('.')

    k = k.substring(0, 最後のインデックス)

    定数キーリスト = k.split('/')

    定数lang = keyList.shift()

    定数 objKey = keyList.join('.')

    if (lang) {

      設定(obj, lang, obj[lang] || {})

      set(obj[lang], objKey, mod)

    }

  })

  オブジェクトを返す

}

const { 言語 } = getLanguages(モジュール)

デフォルト言語をエクスポート

i18nインスタンスの作成

次に、i18n インスタンスを作成し、それを Vue にマウントする必要があります。ロケールに新しい i18n.js を作成します。コードは次のとおりです。

'vue-i18n' から {createI18n} をインポートします。

'./getLangs' からメッセージをインポートします

エクスポートデフォルトcreateI18n({

  レガシー: 偽、

  ロケール: window.localStorage.getItem("lang") || 'zh_CN',

  メッセージ、

})

ここでのデフォルトの言語設定はブラウザの localStorage から取得されており、localStorage がない場合は「zh-CN」となっていることがわかります。言語を切り替えた後は、現在の言語を保存する必要があります。そうしないと、ユーザーが更新したときに、デフォルトの言語構成に戻ります。
main.js にインポートします:

'./locales/i18n' から i18n をインポートします

const app = createApp(App)

app.use(I18n).mount("#app")

テンプレートで使用

ここでは、コンポジション API を使用して導入および使用しています。テンプレートの対応する位置では、t 関数を使用して、現在の言語構成での表示テキストを取得します。関数は、言語構成ファイルのパスと属性を受け取り、ドット構文で接続します。見つからない場合は、関数名全体が文字形式で表示されます。

<テンプレート>

<p>{{t(`index.title`)}}</p>

</テンプレート>

「vue-i18n」から useI18n をインポートします。

エクスポートデフォルト{

    設定（） {

        定数 t は useI18n() です。

        戻り値:

    }

}

言語の切り替え

言語を切り替える一般的な方法は 2 つあります。1 つは、現在の言語設定を URL に配置することです。言語が切り替えられると、ページは対応するルートにジャンプし、現在の言語で対応するテキストが表示されます。

2 つ目は、リフレッシュ/ジャンプなしのスイッチで、現在の言語をローカル キャッシュに保存し、vue-i18n のロケール値を変更して言語を切り替えます。
ここでは 2 番目の方法をお勧めします。言語を切り替えるのに、ページを更新したりジャンプしたりする必要はありません。

<テンプレート>

  <a

    href="javascript:;"

    @click="setLocals(ロケール === 'zh_CN' ? 'en' : 'zh_CN')"

  >

    {{ locale === 'zh_CN' ? '英' : '中' }}

  </a>

</テンプレート>

<スクリプト>

「vue-i18n」から useI18n をインポートします。

"@vue/reactivity" から { ref } をインポートします。

エクスポートデフォルト{

設定（） {

    定数 t, ロケール } = useI18n();

    const getLocals = () => window.localStorage.getItem("lang") || locale.value;

    現在のロケールを定数で指定します。

    const setLocals = (lang = "") => {

      ロケールの値 = lang;

      window.localStorage.setItem("lang", lang);

    };

    （！window.localStorage.getItem（"lang"））{

      setLocals(現在のロケールの値);

    } それ以外 {

      (currentLocale.value !== locale.value) の場合 {

        setLocals(現在のロケールの値);

      }

    }

    戻る {

      t、

      ロケール、

      ローカル設定、

    };

  },

};
</スクリプト>

初期化中に、まずローカルから現在の言語を取得します。そうでない場合は、デフォルトの言語構成を取得します。言語を切り替えるときは、ロケール値を変更するだけでなく、現在の言語のコピーをローカル キャッシュに保存する必要があります。

切り替え後に更新する必要があるかどうかについて

上記の例では、テンプレートで t 関数を使用して直接レンダリングされたテキストは、言語が切り替えられたときに更新せずにビューの言語を更新できます。ただし、セットアップで t 関数を直接使用すると、すぐに更新されず、更新後に有効になります。

テンプレートの外部で t 関数を使用することはお勧めしません。必要に応じて、コンポーネントで多言語テキストを定義し、キーと値のペアの形式でテンプレート内でアクセスできます。

言語を切り替えると他のコンポーネントの更新がトリガーされます

シナリオによっては、ページに表示されるテキストが外部から取得され、言語切り替えによって直接更新できない場合があります。兄弟コンポーネントと同様のブロードキャスト効果を実装する必要があります。

Vue3ではグローバルバグの使用が中止され、代わりにmittなどのプラグインが使用できるようになりました。

要約する

Vite2 と Vue3 を使用して Web サイトの国際化を実現する方法については、これで終わりです。Vite2 と Vue3 を使用した Web サイトの国際化に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。