tencent cloud

Web&H5
最后更新时间：2025-09-29 16:41:16
Web&H5
最后更新时间： 2025-09-29 16:41:16

支持的语言

目前支持简体中文、英文和日文。

切换语言

TUICallKit 会优先获取浏览器语言，如果是中文，英文或者日文中的一种，则以浏览器语言为主，否则使用英文。如果想切换语言，可以使用 setLanguage 接口。
import { TUICallKitAPI, CallMediaType } from '@trtc/calls-uikit-vue';

TUICallKitAPI.setLanguage("zh-cn"); // "en" | "zh-cn" | "ja_JP"

添加新的语言

如果您有其他语言需要支持，可以通过源码集成方式修改语言源文件实现。

第一步：源码集成

注意：
源码集成适用于 Vue + Typescript 项目且 TUICallKit 版本号 ≥ 3.2.2。
1. 下载源码
Vue3
npm install @trtc/calls-uikit-vue
2. 将源码拷贝到自己的项目中，以拷贝到 src/components/ 目录为例：
macOS + Vue3
Windows + Vue3
mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@trtc/calls-uikit-vue/* ./src/components/TUICallKit
xcopy .\\node_modules\\@trtc\\calls-uikit-vue  .\\src\\components\\TUICallKit /i /e
3. 修改引入路径
需要将 TUICallKit 改为从本地文件中引入，如下方代码。其他用法细节可参考见 TUICallKit 快速接入。
import { TUICallKit, TUICallKitAPI, CallMediaType } from "./components/TUICallKit/src/index";
4. 
解决源码拷贝可能导致的报错

如果您在使 TUICallKit 组件时遇到了报错，请不要担心，大多数情况下这是由于 ESLint 和 TSConfig 配置不一致造成的。您可以查阅文档，按照要求正确配置即可。如果您需要帮助，请随时联系我们，我们将确保您能够成功地使用此组件。以下是几个常见的问题：
ESLint 报错
TypeScript 报错
若 TUICallKit 与您项目的代码风格不一致导致报错，可将本组件目录屏蔽，如在项目根目录增加 .eslintignore 文件，如：
# .eslintignore
src/components/TUICallKit
1. 如遇 Cannot find module '../package.json' 报错，是因为 TUICallKit 内引用了 JSON 文件，可在 tsconfig.json 中添加相关配置，示例：
{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}
其他 TSConfig 问题请参见 TSConfig Reference。
2. 如遇 Uncaught SyntaxError: Invalid or unexpected token 报错，是因为 TUICallKit 使用了装饰器，可在 tsconfig.json 中添加相关配置，示例：
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

第二步：新增语言包

以新增越南语为例：
1. 创建目标语言源文件。
在 src/components/TUICallKit/src/TUICallService/locales 目录下新增 vi.ts 文件，复制 src/components/TUICallKit/src/TUICallService/locales/zh-cn.ts 内容到 vi.ts，然后将 json 的 value 翻译成越南语。
export const vi = {    // 注意这里的导出变量
  'hangup': '挂断',
  'reject': '拒绝',
  'accept': '接受',
  'camera': '摄像头',
  'microphone': '麦克风',
  'speaker': '扬声器',
  'open camera': '打开摄像头',
  'close camera': '关闭摄像头',
  'open microphone': '打开麦克风',
  'close microphone': '关闭麦克风',
  'video-to-audio': '转语音通话',
  'virtual-background': '模糊背景',
  'other side reject call': '对方已拒绝',
  'reject call': '拒绝通话',
  'cancel': '取消通话',
  ...
};
2. 从 index.ts 导出
修改 src/components/TUICallKit/src/TUICallService/locales/index.ts 文件。
import { TUIStore } from '../CallService/index';
import { NAME, StoreName } from '../const/index';
import { en } from './en';
import { zh } from './zh-cn';
import { ja_JP } from './ja_JP';
import { vi } from './vi';  // 新增语言文件导入

.....

export const languageData: languageDataType = {
  en,
  'zh-cn': zh,
  ja_JP,
  vi,       // 新增语言文件导出
};
3. 新增 LanguageType 枚举。
修改 src/components/TUICallKit/src/TUICallService/const/call.ts
export enum LanguageType {
  EN = 'en',
  'ZH-CN' = 'zh-cn',
  JA_JP = 'ja_JP',
  VI = 'vi',   // 新增枚举类型
}
4. 切换语言
在项目中通过调用 setLanguage 接口切换语言。
import { TUICallKitAPI, CallMediaType } from '@trtc/calls-uikit-vue';

TUICallKitAPI.setLanguage("vi");

本页内容是否解决了您的问题？
您也可以 联系销售 或 提交工单 以寻求帮助。
是
否

文档反馈