javascript - Vue : vue-i18n: Cannot translate the value of keypath, 默认使用keypath的值

Question

我正在使用 Vue，我想显示三种语言。英语、他加禄语和宿雾语。

现在我有错误

Cannot translate the value of keypath 'NavbarMobile.home'. Use thevalue of keypath as default.

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

这个问题是否来 self 的配置？

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>

主要.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')

语言.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
}

zh.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'
});

zh.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"
        },
}