常见问题
1. 音视频相关问题如何解决？
2. 我只想集成聊天窗口，如何单独集成 TUIChat？如果直接打开指定单聊/群聊会话？
3. js 工程如何接入 TUIKit 组件?
TUIKit 仅支持 ts 环境运行，您可以通过渐进式配置 typescript 来使您项目中已有的 js 代码 与 TUIKit 中 ts 代码共存。
请在您 vue-cli 脚手架创建的工程根目录执行：
vue add typescript
之后按照如下进行配置项进行选择（为了保证能同时支持原有 js 代码 与 TUIKit 中 ts 代码，请您务必严格按照以下五个选项进行配置）
完成以上步骤后，请重新运行项目！
请在您 vite 创建的工程根目录执行：
npm install -D typescript
4. 什么是 UserSig？如何生成 UserSig？
UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
注意
本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见上文。
5. 运行时报错："TypeError: Cannot read properties of undefined (reading "getFriendList")"
若按照上述步骤接入后，运行时出现以下错误，请您务必删除 TUIKit 目录下的 node_modules 目录，以保证 TUIKit 的依赖唯一性，避免 TUIKit 多份依赖造成问题。
6. 运行时报错：/chat-example/src/TUIKit/components/TUIChat /message-input/message-input-editor.vue .ts（8，23）TS1005: expected.
出现以上报错信息，是因为您安装的 @vue/cli 版本过低导致，请您务必保证您的 @vue/cli 版本在 5.0.0 及以上。升级方式如下：
npm install -g @vue/cli@5.0.8
7. 运行时报错: Failed to resolve loader: sass-loader
出现以上报错信息，是因为您未安装 `sass` 环境导致，请执行以下命令进行
sass环境安装:npm i -D sass sass-loader@10.1.1
8. ESLint 报错：error 'withDefaults' is not defined no-undef? 'defineProps' is not defined no-undef? 以及 ESLint 其他报错？
若 chat-uikit-vue 拷贝到 src 目录汇总与您本地项目代码风格不一致导致报错，可将本组件目录屏蔽，如在项目根目录增加 .eslintignore 文件：
# .eslintignoresrc/TUIKit
9. vue/cli 如何关闭 dev 模式下，webpack 全屏 overlay error 报错信息提示？
可以在您项目根目录的 vue.config.js 中进行关闭：
module.exports = defineConfig({...devServer: {client: {overlay: false,},},});
module.exports = {...devServer: {overlay: false,},};
10. 出现 Component name "XXXX" should always be multi-word 怎么办？
IM TUIKit web 所使用的 ESLint 版本为 v6.7.2 ，对于模块名的驼峰式格式并不进行严格校验。
如果您出现此问题，您可以在 .eslintrc.js 文件中进行如下配置：
module.exports = {...rules: {...'vue/multi-word-component-names': 'warn',},};
11. 出现 ERESOLVE unable to resolve dependency tree 怎么办？
npm install 的时候如果出现 ERESOLVE unable to resolve dependency tree ，表示依赖安装冲突，可采用以下方式进行安装：
npm install --legacy-peer-deps
12. 运行报错如下'vue packages version mismatch',如何解决？
如果您是 vue2.7 项目，请在您项目根目录执行：
npm i vue@2.7.9 vue-template-compiler@2.7.9
如果您是 vue2.6 项目，请在您项目根目录执行：
npm i vue@2.6.14 vue-template-compiler@2.6.14
13. vite 项目 npm run build 之后 ts 报错?
原因：package.json script 下 "build": "vue-tsc && vite build" 中的 vue-tsc 命令导致。
解决方案: 删除 vue-tsc 即可。 "build": "vite build"
14. 使用 pnpm 下载缺少依赖?
pnpm 安装 @tencentcloud/chat-uikit-vue 后拷贝到 TUIKit 目录使用会存在内部依赖缺失问题，建议您优先选择 npm / yarn 方式安装。若您确实需要使用 pnpm 安装依赖，请在进行完上文接入步骤后：
1. 将
node_modules/@tencentcloud/chat-uikit-vue/package.json 中的依赖项拷贝到您自身项目根目录 package.json 中。2. 运行
pnpm i ， 进行内部缺失依赖安装。15. H5 页面 iOS 低版本机型出现白屏?
您可以通过配置 polyfill 兼容低机型版本。（什么是 polyfill？polyfill 是一种用于解决浏览器兼容问题的技术。它用于模拟某些浏览器不支持的新特性，使得这些特性能在不支持的浏览器中正常工作。更多详情请参见 babel-polyfill。）
1. 安装 babel-polyfill：
npm i @babel/polyfill
2. 入口文件引入 'babel-polyfill'：
import 'babel-polyfill';
3. 新增 babel.config.js 配置
module.exports = {presets: [['@vue/cli-plugin-babel/preset',{useBuiltIns: 'entry',corejs: 3,},],['@babel/preset-env',{targets: {browsers: ['iOS >= 11'],},useBuiltIns: 'entry',corejs: 3,},],],};
交流与反馈
相关文档
Vue2 & Vue3 UIKit 相关：
集成音视频通话
