Vue3+TS+Vite 開発スキル: 国際化をサポートする方法

Vue3 TS Vite 開発のヒント: 国際化をサポートする方法

はじめに
情報時代の発展に伴い、ますます多くのアプリケーションが複数の言語をサポートする必要があります。さまざまな地域のユーザーのニーズを満たすために。 Vue3 TS Vite などの最新のフロントエンド開発テクノロジで、国際化を効率的にサポートするにはどうすればよいでしょうか?この記事では、一般的な国際化ソリューションを紹介し、開発者が参照して学ぶための具体的なコード例を示します。

本文

1. 国際化ソリューションの選択
   Vue3 TS Vite 開発環境では、さまざまな国際化ソリューションから選択できます。中でも vue-i18n は、豊富な機能とシンプルで使いやすい API を提供する非常に人気のある国際ライブラリです。この記事では、国際化サポートに vue-i18n を使用することを選択します。
2. インストールと構成vue-i18n
   まず、npm または Yarn を介して vue-i18n ライブラリをインストールする必要があります:

npm install vue-i18n

次に、main.ts で vue-i18n をインポートして使用します。

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'
import messages from './locales'

const i18n = createI18n({
  locale: 'zh-CN', // 默认语言
  messages,
})

createApp(App).use(i18n).mount('#app')

上記のコードでは、i18nインスタンスを作成し、オプションとして createApp 関数に渡します。

3. 言語ファイルの構成
   次に、locales フォルダーに言語ファイルを作成する必要があります。各言語ファイルは、対応する言語で翻訳されたテキストを保存するために使用されるキーと値のペアを含む JavaScript オブジェクトです。

├── locales
│   ├── en-US.js
│   └── zh-CN.js
├── App.vue
└── main.ts

中国語 (簡体字) を例として、zh-CN.js ファイルを作成し、その中に翻訳テキストを定義します。 # #国際化されたテキストを使用する

Vue コンポーネントでは、

$t
4. 関数を通じて翻訳されたテキストを参照できます。テンプレートでは、
   {{ $t('transrated text') }} を使用して翻訳結果を表示できます。コードでは、this.$t('transrated text') で翻訳されたテキストを取得できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>export default { welcome: '欢迎使用Vue国际化示例', greeting: '你好，{name}', }</pre><div class="contentsignin">ログイン後にコピー</div></div>
言語の切り替え

i18n
5. インスタンスによって提供される
   locale 属性を使用して、言語の切り替えを実装できます。 i18n.locale の値を変更することで、別の言語に切り替えることができます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:vue;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;h1&gt;{{ $t('welcome') }}&lt;/h1&gt; &lt;p&gt;{{ $t('greeting', { name: '张三' }) }}&lt;/p&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { mounted() { console.log(this.$t('welcome')) console.log(this.$t('greeting', { name: '李四' })) }, } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>ボタンをクリックすると言語を切り替えることができ、それによってページに表示される翻訳されたテキストが動的に変更されます。 概要<p></p>vue-i18n<p> ライブラリを使用することで、Vue3 TS Vite 開発環境にシンプルで使いやすい国際化機能を実装できます。この記事では、<br>vue-i18n<code> のインストールと設定をサンプルコードを通して紹介し、国際化テキストの使用方法と切り替え方法を紹介します。この記事が国際支援の観点から皆様のお役に立ち、特定のプロジェクトに応用・展開できることを願っております。 コード例: [https://github.com/example/vue-i18n-demo](https://github.com/example/vue-i18n-demo)
   リファレンスドキュメント:

   [vue-i18n 公式ドキュメント](https://vue-i18n.intlify.dev/)

   [Vue 3 公式ドキュメント](https://v3 .vuejs.org/)
   • [Vite 公式ドキュメント](https://vitejs.dev/)

   以上がVue3+TS+Vite 開発スキル: 国際化をサポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。