背靠背聊聊 SaaS 多语言
随着经济全球化的深入，业务越来越多元化，许多品牌都会在海外市场开疆扩土，在进行海外业务的推广时，面对的最大挑战就是多语言问题，它决定了你的产品在各个国家地区里是否能拥更好的用户体验和产品竞争力。
在《肩并肩开发自己的微应用》一文中，我们过涂鸦零代码平台创建了属于自己的 SaaS 和微应用，本文基于此介绍 SaaS 框架的多语言功能，通过本文，你将会掌握如何能快捷的添加、修改微应用多语言文案的方法。
如何为自定义项目的文案配置多语言
SaaS 开发框架对多语言支持主要包含以下三种场景：
- 系统预设的文案
- 自定义内容的文案
- 微服务返回的文案【主要是服务端的数据，不在本文项目范围内，不介绍】
通过项目代码修改
1. 系统预设文案
系统预设文案包含的范围有：微应用名称、描述、权限/角色等预设应用的文案。
该类的配置在项目的 /_locales/ 目录下。
Code: Select all
.
├── ....
├── _locales
│ ├── en.json
│ └── zh-CN.json
├── manifest.json
└── ....接下来演示一下如何修改文案多语言配置。
打开上次创建的 micro-app-demo 项目，可以看到以上文件目录。其中，manifest.json 用来描述微应用信息的，而 _locales 目录下的文件定义了 manifest.json 需要的多语言文案。在微应用在注册的时候，会解析 _locales 下的多语言文件并且存入数据库。然后在 manifest.json 文件里可以通过 lang. 关键词获取 _locales 下多语言的值。
如上图，我们在 manifest.json 里定义了两个权限点：编辑 lang.edit、删除 lang.delete。
值得注意的是，「微应用描述多语言」并不会直接接影响微应用自身，而是会影响到「角色管理」微应用下的权限点展示。此时，我们访问 SaaS 的「角色管理」页面，就能看到这俩权限点信息文案。如下图：
.png)
2. 自定义内容的文案
顾名思义，是配置自己开发的页面内容文案的多语言的。
默认每个微应用会提供至少两种语言：中文（zh）、英文 (en)。
具体在项目的 /src/lang/ 文件夹下。
Code: Select all
.
├── ....
├── src
│ └── lang
│ ├── en.json
│ └── zh.json
└── ....微应用在注册的时候，会解析 lang 下的多语言文件并且存入数据库。微应用界面多语言是使用的 i18next 三方包，它也是目前市场上最流行的 Next.js 多语言方案，由于我们微应用使用的 React 框架，所以代码内使用 react-i18next 获取多语言（更多方法见官方文档）：
通过平台修改
在 SaaS 零代码平台 -- 微应用管理 下修改对应词条的多语言，然后发布。
这种方式修改多语言是立即生效的，但在修改时需要注意下词条 code 值的前缀。
微应用描述多语言
多语言词条 code 是以 mf. 作为前缀的，如下图：
此时，再切换到 SaaS 的「角色管理」页面并刷新，可以看到文案已经修改了。如下图：
微应用界面多语言
多语言词条 code 是以 ui. 作为前缀的
此时，再切换到 SaaS 的「micro-app-admin」页面并刷新，可以看到文案已经修改了。如下图：
总结
本教程到这里已经结束，相信你已经掌握了修改、添加微应用多语言的方法，马上登录 SaaS 零代码平台 试一下吧！