怎么在菜单的配置js文件获取国际化包的信息？

Question

我的菜单是动态生成的，就是菜单名是遍历外部的菜单配置信息menuConfig.js文件的得到的，现在我想使用国际化，用的vue-I18n。我该怎么设置，才能在menuConfig.js中使用国际化的信息呢？
我在网上找的案例都是基于组件使用$t函数的，没看到不在组件里使用的例子。
menuConfig.js如下

const menu = [
{
menu1: "menu1"
mark: "xxx",
},
{
menu2: "menu2"
mark: "xxx",
},
……
]

国际化的信息文件

const messages = {
zh:{
menu1: "菜单一"
}，
en:{
menu1:"'menu1
}
}

如上述代码所示，我想在menuConfig.js里应用国家化，这该怎么办啊？

Answer 1

以下内容部分参考ChatGPT模型：

---

可以在Vue实例中使用Vue-i18n插件来设置国际化包，然后将其作为props传递给菜单组件。在菜单组件中，可以使用props来获取国际化包的信息。

在Vue实例中设置国际化包：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './locales';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
});

new Vue({
  el: '#app',
  i18n,
  render: h => h(App),
});

在菜单组件中获取国际化包的信息：

export default {
  props: ['i18n'],
  methods: {
    getMenuTitle(menu) {
      return this.i18n.t(menu.title);
    },
  },
};

然后在使用菜单组件的地方传递i18n作为props：

<menu-component :i18n="i18n"></menu-component>

---

如果我的建议对您有帮助、请点击采纳、祝您生活愉快