多模块下动态语言Vue I18N 与 I18N ALLY的共同使用

VUE-I18N，处理程序的多语言

I18N ALLY 管理开发过程中的多语言，如翻译与显示

 

假设有一个模块为common，下面有各个语言

文件结构

文件内容，强行在语言资源文件中添加模块名（即单文件中的多模块结构。分目录的目的只是为了方便管理。）

ALLY插件识别并显示的效果

 

 

动态加载代码

@@@code

import { set } from 'lodash-es'

 

const modules = import.meta.globEager('./language/**/*.js')

 

function genMessage(langs, prefix = 'lang') {

    const obj = {}

    Object.keys(langs).forEach((key) => {

        const mod = langs[key].default

        let k = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')

        const lastIndex = k.lastIndexOf('.')

        k = k.substring(0, lastIndex)

        const keyList = k.split('/')

        //const lang = keyList.shift()

        //const objKey = keyList.join('.')

        const lang = keyList.shift()

        const s = keyList.pop()

        const objKey = s + '.' + keyList.join('.') //使语言在前,使用目录路径作为模块名

        const moduleName = keyList.shift()

        //生成对象 language:{en.common:{},zh-cn.common:{}}

        if (lang) {

            set(obj, lang, obj[lang] || {})

            set(obj[lang], objKey, mod[moduleName]) //为兼容I18N ALLY，JS的实现为添加一个同名节点，动态加载时取消该节点

        }

    })

    return obj

}

const { language } = genMessage(modules)

 

 

export default language

@@#