关于前端国际化的目录结构设计

说明: 本文不涉及项目中如何引用,使用国际化,浅谈面对庞大国际化的目录结构的分解

1. 背景:

• 不同的研发,在处理同一个项目的国际化,目录结构混乱,遂统一标准
• 现项目国际化翻译已4500+行,如果目录结构不清晰,新增字段比较繁琐
• 建议按模块分JS文件导入导出,减少单个文件国际化行数

2. 目录结构分解思路

const zh_CN = {
    global: {
    },
    app1: {
        module1: {
            part1: {
                notes: {},
                tableCols:{},
                titles: {},
                buttons: {},
                status: {},
                forms: {
                  name: {
                    label: "名称",
                    placeholder: "请输入名称",
                    validMessage: {
                      empty: "请输入名称,最大长度3-20个字符",
                      len: "名称长度3-20个字符",
                      exists: "已经存在,名称还是不要相同了吧",
                      fullWidthAlphabetNumber_: "名称只能包含数字/英文大小写字母/下划线",
                    },
                  },
                },
                // 或者某个很独立的form: 直接命令为 ***Form
                employeeForm: {}
            },
            part2:{},
            part3:{}
        },
        module2: {},
        module3: {},
    },
    app2: {},
    app3: {}
}

export default zh_CN;

• 由于本项目是vue的多页面应用,所以以app1,app2来代替多页面应用的名称
• module1,module2 表示的是应用下的一级模块,
• part1,part2 表示二级模块, 没有二级模块可以不用, 建议不要太多级别