如何在 Vue 3 + i18n 中导入多个语言环境 json 文件？

Question

这是我的代码，运行没有问题：

\n

import { createI18n } from 'vue-i18n'\nimport messages from './components/json/foo/foo_messages.json'\n\nconst app = createApp(App)\ninstallI18n(app)\n\nconst i18n = createI18n({\n  locale: 'ru',\n  messages\n})\n\napp\n  .use(i18n)\n  .use(vuetify)\n  .mount('#app')\n

\n

现在我还需要从 加载消息./components/json/bar/bar_messages.json。我尝试这样做：

\n

import { createI18n } from 'vue-i18n'\nimport foo_msg from './components/json/foo/foo_messages.json'\nimport bar_msg from './components/json/bar/bar_messages.json'\n\nconst app = createApp(App)\ninstallI18n(app)\n\nconst i18n = createI18n({\n  locale: 'ru',\n  messages: {foo_msg, bar_msg}\n})\n\napp\n  .use(i18n)\n  .use(vuetify)\n  .mount('#app')\n

\n

但这没有用。有人能说一下该怎么做吗？

\n

编辑：这是我的 foo json 文件

\n

{\n  "ru": {\n    "header": {\n      "hello": "\xd0\x9f\xd1\x80\xd0\xb8\xd0\xb2\xd0\xb5\xd1\x82"\n    }\n  },\n  "en": {\n    "header": {\n      "hello": "Hello"\n    }\n  }\n}\n

\n

这是 bar json 文件

\n

{\n  "ru": {\n    "footer": {\n      "bye": "\xd0\x9f\xd0\xbe\xd0\xba\xd0\xb0"\n    }\n  },\n  "en": {\n    "footer": {\n      "bye": "Goodbye"\n    }\n  }\n}\n

\n

Answer 1

您尝试做的事情可扩展性不太好。考虑到 i18n JSON 消息的格式，您需要将输入文件合并为如下所示：

\n

{\n  "ru": {\n    "header": {\n      "hello": "\xd0\x9f\xd1\x80\xd0\xb8\xd0\xb2\xd0\xb5\xd1\x82"\n    },\n    "footer": {\n      "bye": "\xd0\x9f\xd0\xbe\xd0\xba\xd0\xb0"\n    }\n  },\n  "en": {\n    "header": {\n      "hello": "Hello"\n    },\n    "footer": {\n      "bye": "Goodbye"\n    }\n  }\n}\n

\n

...这对于 JS 来说绝对是可能的，但你仍然必须为你的每个组件导入 JSON 文件main.js，这是乏味且容易出错的

\n

您是否考虑过在组件中使用 vue-i18n自定义块？您甚至可以将翻译保留在外部 JSON 文件中并使用自定义块，例如<i18n src="./myLang.json"></i18n>

\n

这是更好的方法，但如果您仍然想使用自己的方法，这里有一个简单的代码，如何将所有翻译文件（从 JSON 导入的对象）合并到 vue-i18n 可用的单个对象中：

\n

\r\n

\r\n

// import foo_msg from \'./components/json/foo/foo_messages.json\'\nconst foo_msg = {\n  "ru": {\n    "header": {\n      "hello": "\xd0\x9f\xd1\x80\xd0\xb8\xd0\xb2\xd0\xb5\xd1\x82"\n    }\n  },\n  "en": {\n    "header": {\n      "hello": "Hello"\n    }\n  }\n}\n\n// import bar_msg from \'./components/json/bar/bar_messages.json\'\nconst bar_msg = {\n  "ru": {\n    "footer": {\n      "bye": "\xd0\x9f\xd0\xbe\xd0\xba\xd0\xb0"\n    }\n  },\n  "en": {\n    "footer": {\n      "bye": "Goodbye"\n    }\n  }\n}\n\nconst sources = [foo_msg, bar_msg]\nconst messages = sources.reduce((acc, source) => {\n  for(key in source) {\n    acc[key] = { ...(acc[key] || {}), ...source[key] }\n  }\n  return acc\n},{})\n\nconsole.log(messages)

\r\n

\r\n

\r\n

\n