Vue 组件外使用 VueI18n：彻底解决“无法读取未定义的翻译”错误

vue.js

2024-03-05 20:41:34

在 Vue 组件外使用 VueI18n：彻底解决“无法读取未定义的翻译”错误

问题

在 Vue 组件外尝试调用 Vue.i18n.translate 时，你是否遇到过“无法读取未定义的翻译”错误？这表明 VueI18n 实例尚未正确安装或初始化。

解决方案：

为了解决这个问题，请遵循以下步骤：

在 main.js 中正确安装 VueI18n

在 main.js 文件中，确保正确导入 VueI18n 并将 i18n 实例传递给 Vue 根实例：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import i18nData from './i18nData';

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en',
  messages: i18nData,
});

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

将 i18n 实例安装为全局属性

在创建 Vue 根实例之前，将 i18n 实例安装为全局属性：

Vue.prototype.$i18n = i18n;

在组件外使用 VueI18n

现在，你可以在组件外使用 this.$i18n.translate('key') 访问翻译后的文本：

console.log(this.$i18n.translate('someMessage'));

代码示例：

// main.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import i18nData from './i18nData';

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en',
  messages: i18nData,
});

Vue.prototype.$i18n = i18n;

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

// 组件外使用
console.log(this.$i18n.translate('someMessage'));