即时通信 IM
文档中心>即时通信 IM>Vue 相关问题

Vue 相关问题

最近更新时间：2025-05-12 18:02:42

我的收藏

本页目录：

常见问题

1. 音视频相关问题如何解决？

请单击 音视频通话 > 常见问题 查看解决方案。

2. 我只想集成聊天窗口，如何单独集成 TUIChat？如果直接打开指定单聊/群聊会话？

独立集成聊天窗口，请参见 TUIChat 独立集成方案。

3. js 工程如何接入 TUIKit 组件?

TUIKit 仅支持 ts 环境运行，您可以通过渐进式配置 typescript 来使您项目中已有的 js 代码 与 TUIKit 中 ts 代码共存。
vue-cli
vite
请在您 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 文件：
# .eslintignore
src/TUIKit

9. vue/cli 如何关闭 dev 模式下，webpack 全屏 overlay error 报错信息提示？

可以在您项目根目录的 vue.config.js 中进行关闭：
webpack4
webpack3
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,
      },
    ],
  ],
};

16. 运行报错：Uncaught TypeError: marked__WEBPACK_IMPORTED_MODULE_0_ Marked is not a constructor，如何处理？

如果您运行过程中出现如下错误，说明您当前 Vue CLI构建的项目环境版本较低，需要降低 uikit 中使用的 marked 版本至 5.1.2。

请在您项目的根目录使用以下脚本降低 marked 版本：
npm i marked@5.1.2 --legacy-peer-deps

17. 编译报错 node_modules/marked/lib/marked.esm.js: Class private methods are not enabled，如何处理？

如果您运行过程中出现如下错误，说明您当前使用的 marked 版本过低，请升级 marked 版本至 6.0.0。



请在您项目的 根目录 使用以下脚本降低 marked 版本：
npm i marked@6.0.0 --legacy-peer-deps

18. 运行报错 Uncaught SyntaxError: The requested module xxx does not provide an export named 'Friend'

如果您的 vite 项目运行过程中出现以下报错，请参见以下方案：

在根目录文件 tsconfig.json 下增加以下编译规则，分为以下两种情况：
1. 如果您的 tsconfig.json 没有 references 配置，直接在 tsconfig.json 中配置如下规则：
typescript ≥ 5.0.0
typescript < 5.0.0
{
  ...
  "compilerOptions": {
    ...
    "verbatimModuleSyntax": false,
  }
}
{
  ...
  "compilerOptions": {
    ...
    "importsNotUsedAsValues": "preserve",
  }
}
2. 如果您的 tsconfig.json 已有 references 配置，比如 vite 官方自动配置的 "./tsconfig.app.json"，"./tsconfig.node.json" 等，由于 references 的特性，导致 tsconfig.json 本身只是规则的引用文件，此时直接在 tsconfig.json 中配置以下规则无效。需要将规则添加至实际的references对应的文件中。以下是具体示例：
错误写法
正确写法
当 tsconfig.json 文件中已有 references 相关配置时，直接在 tsconfig.json 中声明以下规则无效
当 tsconfig.json 文件中已有 references 相关配置时，需要在对应的 references 内部文件中声明以下规则。下文中是在 references 中配置的根目录 tsconfig.app.json 文件中配置以下规则。







19. 编译后 Sass waring：Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

如果您在运行后出现如下提示，请不要担心，这是 sass 大版本规则更新后的 warning 提示；该提醒并不会影响您的正常运行。
如果您想去除此类 warning 提示，请将 sass 版本降级至 1.77.4 及以下。

npm i -D sass@1.77.0 sass-loader@10.1.1

交流与反馈

点此进入IM社群，享有专业工程师的支持，解决您的难题。

相关文档

Vue2 & Vue3 UIKit 相关：

集成音视频通话
chat-uikit-vue npm
Vue2 Demo源码及跑通示例
Vue3 Demo源码及跑通示例

Vue2 & Vue3 UIKit 逻辑层: engine 相关

chat-uikit-engine npm 仓库
chat-uikit-engine 接口文档

如果遇到产品相关问题，您可咨询 在线客服寻求帮助。

中国站
目录