1. il8n プラグインをダウンロードします。npm install vue-il8n を通じて現在ダウンロードされている il8n バージョンは vue3.0 をサポートできないため、最新バージョンを入手するには npm install vue-i18n@next を使用する必要があります。ここにあるバージョンは次のとおりです。 ^9.0.0-ベータ.17
npm install vue-i18n@next yarn add vue-i18n@next(个人推荐)2. src の下に language という名前のファイル名を作成し、そのファイルの下に 4 つの js ファイル (中国語、英語、日本語、韓国語) を作成します: zh-CN、en、ja、および ko。
3. 4つのjsファイルに対応するメソッドを記述します ここには切り替えたい言語が格納されています 以下はja.jsというファイルに記述した日本語です 他の3つのファイルでも同様のメソッドを使用します順番に書く
4. 言語ファイルの下にindex.jsファイルを作成します。
5. 言語ファイルの下に il8n ファイルを作成します。
6. main.jsに導入
7.ページに表示するコンポーネント内で { {$t('message.storeBacode')}} を使用します
8. jsで使う場合、vue2.0ではthis. $t('message.storeBacode')ですが、vue3.0ではこれが解除されているのでproxy. $t('message.storeBacode'),
1. getCurrentInstance を vue に導入し、getCurrentInstance をマウントします。
2.リアクティブでproxy.$t('message.unlimited')を使用するとエラーが報告されます
解決策: useI18n() を導入し、ページ レンダリングに形式 t('message.canceled') を使用します。同じことを js でも使用できます。動作にプロキシは必要ありませんが、導入すると const {t} = useIl8n() になります。リアクティブの前に書く必要があります
プロキシの操作メソッドを記述する必要はありません
$t の代わりに t を使用する理由 (次のメソッドは $t と競合しません。 t が使用される理由は、 reactive でのエラー報告の問題を解決するためです)
$tVue18nインスタンスの機能です。これには次のような利点と欠点があります: テンプレート内で柔軟にMustache構文を使用でき{}、Vueコンポーネントのインスタンス内で計算されたプロパティとメソッドも使用できます。ただし、欠点も明らかです。再レンダリングが発生するたびに実行されます。ですので、確かに翻訳費用がかかります。
vt(t) は関数よりもパフォーマンスが高く$t、Vue のコンパイラ モジュール VUE によって提供される早期変換が可能であるため、国際的な拡張性によりパフォーマンスのさらなる最適化が可能です。しかし、欠点も明らかです。$t柔軟な使用法であるにもかかわらず、非常に複雑です。翻訳されたコンテンツが要素にv-t挿入されます。さらに、サーバー側レンダリングを使用する場合は、関数にカスタム変換オプションをtextContent設定する必要があります。directiveTransformscompile@vue/compiler-ssr
9. コンポーネント内で言語を切り替える（重要なポイント）
1. 誤解 (vue2.0 では、言語切り替えを実現するために this.$il8n.locale = 'cn' を使用するのが正しいですが、vue3.0 では、vue2.0 ではプロキシがこれに相当しますが、これは言語を切り替えるとエラーが発生し、バックグラウンドでunknown というプロンプトが表示されます。この時点で il8n は実際にマウントされており、ロケールもエラーを報告しますが、問題が何であり、その解決方法がわかりません。)
2. 解決策（状況は分かりませんが、最終的には問題は解決しましたので、解決策を見てみましょう）
1. プロキシを印刷し、il8n で availableLocales 配列を見つけ、前に設定したいいくつかの言語を確認してから、それを取り出します
2. il8n の availableLocales を取り出し、select にレンダリングします。もちろん、これを行う前にいくつかの計算を行う必要があります。そうでない場合、出力されるのは cn、en、ja、ka になります。開発者として、私たちは理解できます。これは自分たちにとっては理解できないことですが、ユーザーにとっては理解できないことです
1. 計算して変換します (メソッドを作成した場合は、忘れずにそれを返します。そうしないと、メソッドが見つからない場合にエラーが発生します)
2. ページへのレンダリング
<el-select v-model="$i18n.locale" placeholder="请选择" @change="languageBtn($event)">
<el-option
v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale" :label='LanguageComputing(locale)'>
</el-option>
</el-select>
3. 結果を印刷する
1. 切り替える前（デフォルトは英語、ローカルも英語）
2.言語切り替え後（日本語表示、ローカルもjaになります）
注:ページでの
習ったことがありますか？気に入ったら、忘れずに「いいね！」、フォローして集めてください。