uni-app vue3版本使用云端插件的组件无法使用

类别	信息
产品分类	uniapp/App
PC开发环境	Mac
PC系统版本	macOs 14.0 (23A344)
HBuilderX	正式
HBuilderX版本	3.98
手机系统	Android
手机版本	Android 11
手机厂商	未知
手机机型	rk3568_r
页面类型	vue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

示例代码：

import Vue from 'vue'  
import App from './App'  

Vue.config.productionTip = false  

App.mpType = 'app'  

const app = new Vue({  
    ...App  
})  
app.$mount()

将这一段替换为下面vue3的语法

import App from './App'  
import {createSSRApp} from 'vue'  
export function createApp() {  
    const app = createSSRApp(App)  
    return {  
        app  
    }  
}

操作步骤：

下载虹软人脸识别离线识别-人脸识别增值版的示例项目后，将main.js中的vue2引入语法替换为vue3的引入语法，运行真机后进入页面选择人脸录入按钮进入页面后即可还原

预期结果：

组件正常使用

实际结果：

组件可以显示，但是内部逻辑无法使用

bug描述：

使用虹软人脸识别离线识别-人脸识别增值版插件时，在使用vue3语法时无法识别到组件，控制台输出了如下警告:

13:17:28.343 Vue warn]: Failed to resolve component: wrs-arcFaceAppreciationView  
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions. isCustomElement.  
at <VideoCompare__pageId=3__pagePath="pages/face/video_compare""__pageQuery={}>

在经过插件作者咨询后可能认为是uniapp的云打包问题

itying888 1楼•8 天前

解决了吗佬

nodeper 2楼•8 天前

在 uni-app 中使用 Vue 3 版本时，如果遇到云端插件组件无法使用的问题，可能的原因和解决方法如下：

1. 确认插件的兼容性

确保你使用的插件支持 Vue 3。有些插件可能仅支持 Vue 2，或者需要特定的版本才能正常工作。
在插件文档或插件市场中查看插件是否明确支持 Vue 3。

2. 正确引入插件

确保插件已经正确安装并引入到项目中。
如果是云端插件，需要在 uniCloud 管理后台中正确配置并绑定到项目中。
在 main.js 或 main.ts 中正确初始化插件。

import { createSSRApp } from 'vue'
import App from './App.vue'
import plugin from 'your-plugin' // 引入插件

export function createApp() {
  const app = createSSRApp(App)
  app.use(plugin) // 使用插件
  return {
    app
  }
}

3. 检查插件依赖

有些插件可能依赖特定的库或环境。确保这些依赖已经正确安装。
例如，某些插件可能需要 vuex 或 vue-router，如果没有安装，插件可能无法正常工作。

4. 查看控制台错误

打开开发者工具，查看控制台是否有报错信息。常见的错误包括：
- 插件未找到
- 组件未注册
- 依赖缺失
根据错误信息进行排查。

5. 更新 uni-app 版本

确保你的 uni-app 版本是最新的，尤其是 Vue 3 的支持可能在新版本中有改进。

使用以下命令更新 uni-app CLI：

npm install -g @vue/cli @vue/cli-service-global
npm install -g @dcloudio/uni-cli

6. 插件配置问题

如果是 uniCloud 插件，检查 uniCloud 配置是否正确。
在 manifest.json 中确保插件的配置项正确。

7. 手动注册组件

如果插件提供了组件但未自动注册，可以尝试手动注册组件。

import { YourComponent } from 'your-plugin'

export default {
  components: {
    YourComponent
  }
}