vueプロジェクトでvue-i18nを使用して多言語切り替え機能を実現
プロジェクトでは多言語切り替え機能を実現する必要があり、実現方法は様々ありますが、ここではvue-i18nを使って実現する方法を紹介します。
Vue I18n リファレンス ドキュメント
1. vue-i18n 依存関係パッケージをインストールします
npm install --save vue-i18n
2. zh-CN および en-US ファイルを構成する
api/messages で zh-CN.json と en-US.json の間で切り替える必要がある中国語と英語のファイルを構成します。
// zh-CN.json
{
"langName": "中文",
"menuList": {
"home": "主页",
"user": "用户管理",
"roles": "角色管理",
"notice": "通知公告",
"logs": "日志管理"
}
}
// en-US.json
{
"langName": "en-US",
"menuList": {
"home": "Home",
"user": "User management",
"roles": "Role management",
"notice": "Notice Announcement",
"logs": "log management"
}
}
3. main.js で i18n プラグインをグローバルにマウントします
main.js でグローバル インポートを実行します。注意: 正しいリソース ファイルをインポートしてください。
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh-CN', // 将要切换的语言，可以通过url拼的参数获取，用户行为select选择获取，本地manifest配置获取等，根据场景动态获取
messages: {
'zh-CN': require('./api/languages/zh-CN.json'), // 本地资源文件，我这里配2个语言，中文&英文，src下根据个人情况放置
'en-US': require('./api/languages/en-US.json')
}
});
const vm = new Vue({
el: '#app',
i18n,
store,
router,
render: c => c(App),
});
4. ページ内での使用
// template中直接使用
<template>
<div class="menuWrap">
<div class="menuInner">
{
{
$t('menuList.home') }}
</div>
<div class="menuInner">
{
{
$t('menuList.user') }}
</div>
<div class="menuInner">
{
{
$t('menuList.roles') }}
</div>
</div>
</template>
// script中直接使用
<script>
export default {
data () {
return {
langName: '',
}
},
created () {
this.langName = this.$t('langName')
}
}
</script>
5. 言語の切り替え
<template>
<div class="langWrap">
<div class="langInner" @click="handleCh">
中文
</div>
<div class="langInner" @click="handleEn">
英文
</div>
</div>
</template>
<script>
export default {
data () {
return {
langName: '',
}
},
methods: {
handleCh() {
this.$i18n.locale = 'zh-CN'
},
handleEn() {
this.$i18n.locale = 'en-US'
},
}
}
</script>
最後に: npm への vue-i18n のインストールは成功しましたが、引用時に「未定義のプロパティを読み取れません ('インストール' を読み取っています)」というエラーが発生する場合は、私の他の記事を参照してください: vue-i18n の使用の問題の解決vue プロジェクトの i18n i18n が、未定義のプロパティを読み取れない ('install' を読み取っている) という問題を報告します