国际化
完整版本的工程支持了国际化的配置
全局的国际化配置
默认情况下，在src/locales下的所有配置文件，表示全局的国际化文件，你可以在这里添加一些全局的多语言配置。
locales ## 国际化目录
├─ index.ts ## 入口
└─ lang ## 国际化配置目录
├─ global ## 全局国际化
│ ├─ en-US.ts
│ └─ zh-CN.ts
├─ pages ## 页面多语言配置
│ ├─ en-US.ts
│ └─ zh-CN.ts
├─ en-US.ts ## 英文配置
└─ zh-CN.ts ## 中文配置locales ## 国际化目录
├─ index.ts ## 入口
└─ lang ## 国际化配置目录
├─ global ## 全局国际化
│ ├─ en-US.ts
│ └─ zh-CN.ts
├─ pages ## 页面多语言配置
│ ├─ en-US.ts
│ └─ zh-CN.ts
├─ en-US.ts ## 英文配置
└─ zh-CN.ts ## 中文配置模块级别的国际化配置
本身一个项目增加对国际化的支持后，我们不应将所有的国际化的配置放到全局配置中，我们应该将多语言的国际化配置分散到各个模块中进行处理。
例如在pages/common中我们创建一个locales的文件夹用于存放只针对common模块的多语言的配置。
在locales中分别创建zh-CN.ts和en-US.ts的文件，用于导出我们的多语言部分。
zh-CN.ts
ts
export default {
common:{
'login.title':"登录"
}
}export default {
common:{
'login.title':"登录"
}
}en-US.ts
ts
export default {
common:{
'login.title':"Login"
}
}export default {
common:{
'login.title':"Login"
}
}如上配置后，工程会自动加载多语言的配置文件。
需要注意的是
请确保所有的key均是唯一的，重复的key会被覆盖，如果是模块下的多语言，建议前缀使用模块名.具体的多语言配置，参考如上的配置。
使用
在使用国际化的时候，我们推荐使用我们封装过的useI18nLocale的t函数来实现国际化的配置。
这是为了方便我们后期增加移除多语言功能后的兼容处理方式。
vue
<script lang="ts" setup>
const { t } = useI18nLocale()
</script>
<template>
<div>
<h1>{{ t('login.title') }}</h1>
</div>
</template><script lang="ts" setup>
const { t } = useI18nLocale()
</script>
<template>
<div>
<h1>{{ t('login.title') }}</h1>
</div>
</template>