Vue 3 中使用 vue-i18n 合并多模块多语言JSON文件的问题求助

首先你代码里存在一个明显的笔误：合并高棉语（kh）翻译时，错误地使用了enSources数组，导致最终khMessages实际上是英文翻译的内容，这是核心问题。

其次，当前的合并逻辑是浅合并，如果你的翻译JSON里存在嵌套对象（比如{ "common": { "btn": "Submit" } }），后面文件的同名对象会直接覆盖前面的，而不是合并嵌套属性。下面提供两种修复方案：

方案1：修复笔误 + 保持浅合并（适用于无嵌套翻译结构） #

直接修正khMessages的reduce数据源，替换成khSources：

import { createI18n } from 'vue-i18n'
import en from '@/locales/en.json'
import kh from '@/locales/kh.json'
import enRecruitment from '@/modules/recruitments/locales/en.json'
import khRecruitment from '@/modules/recruitments/locales/kh.json'

// Merge english locales json files
const enSources = [en, enRecruitment]
const enMessages = enSources.reduce((acc: any, source: any) => {
    for (const key in source) {
        acc[key] = { ...(acc[key] || {}), ...source[key] }
    }
    return acc
}, {})

// Merge khmer locales json files - 修复此处的数据源错误
const khSources = [kh, khRecruitment]
const khMessages = khSources.reduce((acc: any, source: any) => {
    for (const key in source) {
        acc[key] = { ...(acc[key] || {}), ...source[key] }
    }
    return acc
}, {})

const i18n = createI18n({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: {
        en: enMessages,
        kh: khMessages,
    },
})

export default i18n

方案2：修复笔误 + 深层合并（适用于有嵌套翻译结构） #

如果你的翻译文件存在多层嵌套，建议使用深层合并逻辑，避免嵌套属性被覆盖：

import { createI18n } from 'vue-i18n'
import en from '@/locales/en.json'
import kh from '@/locales/kh.json'
import enRecruitment from '@/modules/recruitments/locales/en.json'
import khRecruitment from '@/modules/recruitments/locales/kh.json'

// 深层合并工具函数
const deepMerge = (target: any, source: any): any => {
    const result = { ...target }
    for (const key in source) {
        if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
            result[key] = deepMerge(result[key] || {}, source[key])
        } else {
            result[key] = source[key]
        }
    }
    return result
}

// Merge english locales json files
const enMessages = [en, enRecruitment].reduce(deepMerge, {})

// Merge khmer locales json files - 修复数据源错误
const khMessages = [kh, khRecruitment].reduce(deepMerge, {})

const i18n = createI18n({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: {
        en: enMessages,
        kh: khMessages,
    },
})

export default i18n

验证方法 #

可以通过打印合并后的结果确认是否正确：

console.log('合并后的英文翻译:', enMessages)
console.log('合并后的高棉语翻译:', khMessages)

内容的提问来源于stack exchange，提问作者leang webdev