09.17 国际化说明



介绍

前端国际化使用说明介绍

如何使用

在每个项目的国际化目录中也有具体使用文档说明

joolun-plus-ui 工程说明 (后台web管理端)

国际化说明规范

• 重构 i18n 国际化规范写法，支持多模块多目录的写法，删除原有框架的 i18n 写法
• 所有公共文字内容放到 src/locales/lang 文件夹中对应的目录中
• 语言文件会自动按目录格式的生成多层级数据 如文件：src/locales/lang/mall/activebackground.json 文件的使用方式为： $t(mall.activebackground.xxx)

目录结构

简体中文目录结构

├── src
│   ├── locales
│   │   ├── lang
│   │   │   ├── zh-CN.ts  # 所有简体中文的文字引入的 ts 文件
│   │   │   ├── zh-CN     # 简体中文文字存放的目录 json 格式方便直接 i18n-ally 插件直接修改
│   │   │      ├── commons.json  # 常用文字的 json 文件
│   │   │      ├── menu.json    # 菜单文字的 json 文件
│   │   │      ├── mall         # 商城模块的目录
│   │   │      │   ├── activebackground.json  # 商城活动背景的 json 文件

项目开发国际化文字显示

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

I18n-ally 插件

安装了该插件后，你的代码内可以实时看到对应的语言内容

• 还可以使用 i18n_tool 插件, 该插件可一键提取文件的中文内容提升工作效率

如何使用

引入项目自带的 useI18n 注意不要引入 vue-i18n 的 useI18n, 如下:

import { useI18n } from "@/locales/setupI18n";

const { $t } = useI18n();

const title = $t("commons.title");

新增语言

1. 首先新增项目的语言文件 > > 目前项目自带的语言只有 zh-CN 和 en 两种,其他新语言在 src/locales/lang/ 下新增相应的语言目录及语言文件并引入即可

2. 然后新增第三方库的翻译 > > 目前项目中需要引入 avue 和 dayjs 对应的语言包 (avue只有 zh 和 en ,其他的语言包需要自行重新定义即可)

3. 在 src/layout/components/lang/index.vue 文件中添加新的语言切换选项

菜单数据国际化说明

菜单数据是动态的,目前系统只按照菜单的中文翻译了对应的语言,如果修改了菜单文字,那么翻译文件也需要修改

• 首先在语言文件 menus.json 文件中使用后台返回的菜单数据的 label 属性固定为国际化的key
• 然后在 router/utils.ts 中使用代码: item.meta.title = $t(menus.${item.label}); 拼接菜单的 title, 使 $t 函数可以识别并正常显.
• 示例: 拼接后的数据为: menus.首页 , 经过 $t(menus.首页) 函数处理后, 会自动从 menus.json 文件中读取对应的值 首页
• 注意: 如果菜单的 label 属性值修改了, 需要修改 menus.json 文件中对应的值
• menus.json 文件格式:

// 中文json:
{
"首页": "首页",
}
// 英文json:
{
"首页": "Home",
}

uniapp项目说明

• uniapp项目都是通用的国际化方案,所以使用方法一样,uniapp官方文档: https://uniapp.dcloud.net.cn/tutorial/i18n.html
• 下面这些项目都是采用uniapp的国际化使用方式: joolun-plus-uniapp / joolun-plus-uniapp-pc / joolun-plus-app

如何使用

vue文件： this.$t("appraises.anonymous") 或者 $t("appraises.anonymous") 或者js文件的方法 js文件：js文件中国际化的数据需要使用函数才能动态切换语言, 注意props中需要按照下面方式使用:

1. 首先在文件顶部引入

import i18nVue from "@/locale";
const i18n  = i18nVue.global;

2. 然后使用： i18n.t("shop.nameTip")

注意：
1. androidPrivacy.json 文件内容需要单独处理
2. 使用插值语法时，微信小程序和App不兼容 https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html#vue-i18n ,所以建议使用字符串替换方法,可参考 pages/login/codelogin.vue
    提示: 如果觉得手动翻译麻烦可以使用vscode插件, 翻译的key是随机的
    I18n Tools: 一键提取指定目录中文到指定文件
    i18nn Ally: 一键翻译中文到其他语言文件
3. 只能使用json单级key(比如:"api.apiError"),否则App端会报错

新增语言

按照uniapp官方文档说明

1.首先新建语言json文件

2.在 locale/index.js 文件中引入新的语言文件

3.在 /components/lang-change/index 文件中添加切换的语言选项

4.翻译新的语言文件(可以使用vscode的i18nn Ally插件一键翻译)

uniapp项目如何去掉国际化,还原项目的中文显示

1. 使用 VS Code 工具打开项目 ,然后下载 I18n Tools 插件
2. 任选一个文件夹右键选择 i18n-tools国际化工具 - 项目设置, 然后将文件内容改为下面的内容(不要直接全部复制,不然格式会报错,建议只拷贝值)
3. 选一个需要还原的文件夹, 点击右键 i18n-tools国际化工具 - 还原当前目录 > 我们测试了还原操作, 但没有全面的测试显示效果, 所以全部还原后请自行测试是否正常

module.exports = {
  entry: ["pages", "components"], // 提取、还原、遗漏扫描入口文件夹，可以配置多个,默认是 src
  outDir: "locale", // i18n 输出文件夹 默认是 src/locales
  outShow: 1, //输出文件展示结构 1 扁平化结构 2树级结构 默认扁平化
  exclude: ["locale"], // 不提取的文件夹, 默认是 ['src/locales']
  extensions: [".vue", ".js", ".ts"], // 提取的文件后缀名，默认是 ['.js', '.vue', '.ts']
  filename: "zh-Hans", // 输出的文件名,默认为 zh_cn
  extname: "json", //  输出的文件后缀名默认为 js  ,支持json和js（js格式为 module.exports = {} 或 export default {}），
  langList: ["en"], // 翻译目标语言列表，默认是 ['en']   具体语种请自行查看。注意：使用不同的翻译接口，需要更换对应的语言编码，腾讯翻译、火山翻译、谷歌翻译语言编码大致相同，百度要特别注意，与上述3种翻译有不同的语言编码
};