Vue: Vue -i18n:无法转换keypath的值，使用keypath的值作为默认值

Question

我正在使用Vue，我想显示三种语言。英语，他加禄语和菲律宾语

现在我有了错误

无法转换键数'NavbarMobile.home'的值。使用

我检查了插件是否通过console.log(this.$i18n.locale)工作。结果是"en""en"是我的默认语言，英语。

这个问题是来自我的配置吗?

NavbarMobile.js

<b-list-group-item :to="{name:'Home'}"  active class="flex-column align-items-start home-item">
<div class="d-flex w-100 justify-content-between">
<!-- Home -->
{{ $t('NavbarMobile.home') }}
</div>
</b-list-group-item>

main.js

import Vue from 'vue'
import i18n from './lang/lang';
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')

lang.js

import Vue from 'vue'
import english from './en.js'
import tagalog from './tg.js'
import cebuano from './ce.js'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
lazy:true,
locale: "en",
"en" : english,
"tg" : tagalog,
"ce" : cebuano,
//silentTranslationWarn: process.env.NODE_ENV === 'development'
});
export default {
i18n
}

en.js

const english = {
"en": {
"NavbarMobile": {
"home": "Home",
"pro": "Pro version",
"contact": "Contact",
"help": "Help",
"profile": "Profile",
"login": "Login",
"logout": "Logout",
"terms and conditions": "Terms and conditions",
"follow us": "Follow us"
},
}
}
export default {
english
}

我有相同格式的js文件，用于他加禄语和宿瓦诺语。

如何解决这个问题?

Answer 1

1. 您使用VueI18n不正确，翻译需要传递到messages属性
2. 传入messages属性的对象只需要在第一级具有区域设置代码，现在您有两次(在构造函数和en.js中)

const i18n = new VueI18n({
lazy:true,
locale: "en",
messages: {
"en" : english,
"tg" : tagalog,
"ce" : cebuano,
},
//silentTranslationWarn: process.env.NODE_ENV === 'development'
});

en.js

export default {
"NavbarMobile": {
"home": "Home",
"pro": "Pro version",
"contact": "Contact",
"help": "Help",
"profile": "Profile",
"login": "Login",
"logout": "Logout",
"terms and conditions": "Terms and conditions",
"follow us": "Follow us"
},
}