如何在Vue 3+ i18n中导入多个地区json文件？
这是我的代码，没有问题：
import { createI18n } from 'vue-i18n'
import messages from './components/json/foo/foo_messages.json'
const app = createApp(App)
installI18n(app)
const i18n = createI18n({
locale: 'ru',
messages
})
app
.use(i18n)
.use(vuetify)
.mount('#app')现在，我还需要加载来自./components/json/bar/bar_messages.json的消息。我试过这样做：
import { createI18n } from 'vue-i18n'
import foo_msg from './components/json/foo/foo_messages.json'
import bar_msg from './components/json/bar/bar_messages.json'
const app = createApp(App)
installI18n(app)
const i18n = createI18n({
locale: 'ru',
messages: {foo_msg, bar_msg}
})
app
.use(i18n)
.use(vuetify)
.mount('#app')但没起作用。有人能说怎么做吗？
编辑：这是我的foo json文件
{
"ru": {
"header": {
"hello": "Привет"
}
},
"en": {
"header": {
"hello": "Hello"
}
}
}这是条形json文件
{
"ru": {
"footer": {
"bye": "Пока"
}
},
"en": {
"footer": {
"bye": "Goodbye"
}
}
}回答 2
Stack Overflow用户
发布于 2022-01-03 15:23:34
您所要做的不是很好的可伸缩性。给定i18n JSON消息的格式，您需要将输入文件合并为如下所示：
{
"ru": {
"header": {
"hello": "Привет"
},
"footer": {
"bye": "Пока"
}
},
"en": {
"header": {
"hello": "Hello"
},
"footer": {
"bye": "Goodbye"
}
}
}使用JS绝对可以使用...this，但是您仍然必须为您的main.js中的每个组件导入JSON文件，这很繁琐，而且容易出错。
您考虑过在组件中使用vue-i18n 自定义块吗？您甚至可以将翻译保存在外部JSON文件中，并使用像<i18n src="./myLang.json"></i18n>这样的自定义块
这是更好的方法，但是如果您仍然想使用您的方法，下面是一段简单的代码，如何将所有转换文件(从JSON导入的对象)合并到一个由vue-i18n使用的对象中：
// import foo_msg from './components/json/foo/foo_messages.json'
const foo_msg = {
"ru": {
"header": {
"hello": "Привет"
}
},
"en": {
"header": {
"hello": "Hello"
}
}
}
// import bar_msg from './components/json/bar/bar_messages.json'
const bar_msg = {
"ru": {
"footer": {
"bye": "Пока"
}
},
"en": {
"footer": {
"bye": "Goodbye"
}
}
}
const sources = [foo_msg, bar_msg]
const messages = sources.reduce((acc, source) => {
for(key in source) {
acc[key] = { ...(acc[key] || {}), ...source[key] }
}
return acc
},{})
console.log(messages)
Stack Overflow用户
发布于 2022-05-25 04:26:13
接受的解决方案已经是一个很好的解决方案，但是如果您协助使用.json文件翻译文本的话。这是我的解决办法。
使用vue-cli添加i18n依赖项，它将生成我们需要的所有需求文件。
vue add vue-i18n它将在src中生成locales文件夹，它存储所有的翻译json文件。然后它将在.env文件和i18n.js文件上生成耦合env变量。
下面是它生成的i18n.js
import { createI18n } from 'vue-i18n'
/**
* Load locale messages
*
* The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
* See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
*/
function loadLocaleMessages() {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key).default
}
})
return messages
}
export default createI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})在我们的main.js中，我已经看到vue已经为我添加了组件
import i18n from './i18n'
const app = createApp(App).use(i18n)*编辑我使用vite构建vue项目，loadLocaleMessages在我的情况下不起作用。我做了些修改。它需要手动导入所有json文件，但我没有找到任何替代解决方案。
我还将带有'VITE‘前缀的env变量和process.env更改为import.meta.env。
// import all the json files
import en from './locales/en.json'
import zh from './locales/zh.json'
/**
* Load locale messages
*
* The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
* See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
*/
function loadLocaleMessages() {
const locales = [{ en: en }, { zh: zh }]
const messages = {}
locales.forEach(lang => {
const key = Object.keys(lang)
messages[key] = lang[key]
})
return messages
}export default createI18n({
locale: import.meta.env.VITE_APP_I18N_LOCALE || 'en',
fallbackLocale: import.meta.env.VITE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})https://stackoverflow.com/questions/70567655
复制相似问题
腾讯云开发者
