前端调用国际化

# 前端调用国际化

# 准备

i18n封装方法
!!!!!禁止直接使用$t方法!!!!!

# 配置

# website.js `优先读取`

window.website节点下新建lang节点

window.website = {
  path: "", //如果有虚拟目录则需要配置/虚拟目录
  lang: {
    sysCode: "TG", //国际化系统代码,对应ework系统代码
    mode: "online", //online 在线的读取多语言包  | offline 读取web/lang目录下的langUI.json文件
    switchInNavbar: true, //是否在页面显示多语言切换，true：显示
    //多语言包的线上api地址,online情况下在线调用接口获取国际化
    server: ["http://192.168.106.178:9004/eaapi"],
  },
};

1
2
3
4
5
6
7
8
9
10
11

# env

website.js没有的属性尝试从env读取

# 国际化配置  

# 国际化系统代码,对应ework系统代码
VITE_TG_LANG_SYS_CODE = 'TG'  
# 如果有虚拟目录则需要配置/虚拟目录
VITE_TG_LANG_PATH = ''
# online 在线的读取多语言包  | offline 读取web/lang目录下的langUI.json文件
VITE_TG_LANG_MODE = 'online'  
# 多语言包的线上api地址,online情况下在线调用接口获取国际化  
VITE_TG_LANG_SERVER = 'http://192.168.106.178:9004/eaapi'  
# 是否在页面显示多语言切换，true：显示  
VITE_TG_LANG_SWITCHINNAVBAR = 'false'

1
2
3
4
5
6
7
8
9
10
11
12

# 导入国际化

import {tmn, tm, t} from '@i18nHelper'

# 方法说明

# tm 方法 `推荐使用`

tm('action.add','新增') //有维护国际化就显示 新增,没有则显示 新增

第二个参数为memo,如果没有则返回 memo的值,

# t 方法

t('action.add') //有维护国际化就显示 新增,没有则显示 action.add

直接使用访问代码,如果没有则返回访问代码 action.add

# tmn 方法

tm('action.add','新增','tg') //有维护国际化就显示 新增,没有则显示 新增

第二个参数为memo,如果没有则返回 memo的值第三个参数为namespace,实际组合后的访问代码为tg.action.add 实际使用场景不多

# 常见调用方法示例

# 绑定页面控件属性

<tg-button @click="page.add" icon="CirclePlus" :name="tm('action.add','新增')"/>

# 直接页面调用

<tg-button size="large" @click="clearAllDataHelp">  
  {{ tm('action.add','新增') }}  
</tg-button>

1
2
3

# js ts代码里面调用

tm('appGen.code','代码'), //显示中文名

# 带参数的调用

tm('tg.page.userError','用户名:{0},用户昵称:{1},登陆异常!', ['user1', '用户1']),

解构出来的参数按照 0,1,2...顺序填充占位符

tg.page.userError 维护的提示信息是用户名:{0},用户昵称:{1},登陆异常! 实现显示的是用户名:user1,用户昵称:用户1,登陆异常!

# Props 声明里面调用

const props = defineProps({
  type: {
    // 日期控件类型， 默认date. [date,daterange 日期选择，datetime 日期时间选择，datetimerange 日期段选择，]
    type: String,
    default: "date",
  },
  rangeSeparator: {
    type: String,
    default: () => {
      return tm("tg.page.common.to","至"); //至
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13

上次更新: 2024/3/19 18:51:57

← 国际化配置和管理后端调用国际化→