Vue プロジェクトで多言語の切り替えと国際化を実現する方法
はじめに:
現在のグローバリゼーションの状況では、多くの Web サイトやアプリケーションが多言語の切り替えと国際化を実現する必要があります。 -さまざまなユーザーグループのニーズを満たすための言語サポート。人気のあるフロントエンド フレームワークとして、Vue は複数言語の切り替えと国際化を実現する便利な方法も提供します。この記事では、Vue プロジェクトで多言語切り替えと国際化を実装する方法と、具体的なコード例を紹介します。
1. 準備
npm install vue-i18n --save
英語を例として、次のコンテンツを en.json に追加します:
{
"header": "Welcome to my website!",
" content ": "これは多言語サポートのための Vue プロジェクトです。",
"button": "Switch Language"
}
次のコンテンツを zh.json に追加します:
{
"header": "私の Web サイトへようこそ!",
"content": "これは、Vue を使用して多言語サポートを実装するプロジェクトです。",
"button": "言語の切り替え"
}
2. 構成と使用
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en', // デフォルトの言語は英語です
メッセージ: {
en: require('./locales/en.json'),
zh: require('./locales/zh.json')}
})
new Vue ({
i18n,
render: h => h(App)
}).$mount('#app')
<h1>{{ $t('header') }}</h1><h1>{{ $t('header') }}</h1>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
