Vue：vue-i18n：无法翻译 keypath 的值，使用 keypath 的值作为默认值

Posted 2023-02-16

【中文标题】Vue：vue-i18n：无法翻译 keypath 的值，使用 keypath 的值作为默认值

【英文标题】：Vue: vue-i18n: Cannot translate the value of keypath, Use the value of keypath as default

【发布时间】：2021-06-03 23:46:45

【问题描述】：

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

现在我有错误

无法转换键路径“NavbarMobile.home”的值。使用 keypath 的默认值。

我通过 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

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 文件。

我该如何解决这个问题？

【参考方案1】：

您错误地使用了VueI18n，需要将翻译传递到messages 属性中 传递到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"
        ,

【讨论】：

抱歉，问题没有解决。我认为必须使用 const english = export default english 。

您对export 的使用是错误的。通过执行export default i18n ，您正在导出具有i18n 属性的新对象，而不是导出i18n 实例。只需使用export default i18n