国际化

前言

在我们开发项目，尤其是涉及到国际化项目时，常常会提取出项目中使用的静态文本，使用语言包进行管理，当切换语言设置的时候，整个项目的文字可以响应式的切换语种。
包版本： vue.js(3.x) + ant-design-vue(4.x) + vue-i18n(9.2.x)。

配置

插件安装

如果你使用的 vscode 开发工具，则推荐安装 I18n-ally 这个插件。

系统默认配置

目前系统支持中文(zh)和英文(en)两种语言。

在配置入口文件src/core/config/init.config.ts中配置语言参数，在src/assets/locales/中编写国际化静态资源文件。

// 国际化设置 'src/core/config/init.config.ts'
import { EN, ZH } from '@assets/locales'

{
    appConf: {
        locales: {
            // header中是否显示国际化
            show: true,
            // 国际化默认的语言 Language | 'navigator'
            defaultLocale: Language.ZH,
            // 根据语言，获取国际化信息
            message: (lang: Language): Recordable => lang === Language.ZH 
                ? ZH 
                : EN
        },
        ...
    }
}

如何使用

代码嵌套(~层级最好与目录结构相同~)；
key值使用大写字母，使用_进行连接；
变量使用"{}"进行包裹

// # src/assets/locales/zh.ts
{
    "USER": {
        "TEMPLATE": {
            "NAME": "模板名称",
            "CODE_NAME": "编码名称",
            "DYNAMIC_NUM": "我是一个动态的数据{num}"
        }
    }
}

// 页面中使用
import { useI18n } from '@dt-frames/core'

const { t } = useI18n('USER.TEMPLATE')
const { t: t1 } = useI18n()

// 模板名称
console.log( t('NAME') )    

// 编码名称
console.log( t1('USER.TEMPLATE.CODE_NAME') ) 

// 我是一个动态的数据18,注意这个'num'属性与上面的变量'num'一样
console.log( t('DYNAMIC_NUM', { num: 18 }) )

国际化 ​

前言 ​

配置 ​

插件安装 ​

系统默认配置 ​

如何使用 ​

国际化

前言

配置

插件安装

系统默认配置

如何使用