多模塊下動態語言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

@@#