uni-app vue3之后在nvue中使用原生插件打包自定义基座会出现 resolution via compilerOptions.isCustomElement.导致自定义事件无法触发

开发环境	版本号	项目创建方式
Mac	无	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.85

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：redmi k50pro

页面类型：nvue

vue版本：vue3

打包方式：云端

示例代码：

<template>  
<view style="flex:1;background-color: #0A98D5;" >  
<button type="default" @click="play">play</button>  
<button type="default" @click="pause">pause</button>  
<button type="default" @click="sendGift">sendGift</button>  
<sn-svga-view ref="svga" :autoPlay="true" :dynamicTexts="dTexts" @load="load" @finish="finish" :loopCount="1"  
clearsAfterStop="false" style="flex:1;background-color: red;" :source="source" />
</view>
</template>  

<script>
export default {
data() {
return {
// source: '/static/rose_2.0.0.svga',
source: '',
// source: 'https://snice.oss-cn-hangzhou.aliyuncs.com/svga/posche.svga',
dTexts: {}
};
},
methods: {
play() {
this.source = '/static/image/gift/520.svga';
this.$refs.svga.play();
},
pause() {
this.$refs.svga.pause();
},
load(e) {
console.log(e);
console.log(this.$refs.svga);
uni.showToast({
icon: 'none',
title: JSON.stringify(e.detail)
});
},
sendGift() {
//this.$refs.svga.stop();
this.source = '';
this.$nextTick(() => {
this.source = '/static/image/gift/666.svga';
});
},
finish(e) {
uni.showToast({
icon: 'none',
title: JSON.stringify(e.detail)
});
}
}
};
</script>

操作步骤：

使用vue3+vite创建的脚手架项目，打包app使用自定义基座来调试，报警告[Vue warn]: Failed to resolve component: sn-svga-view，自定义事件无法触发

预期结果：

没有警告，自定义事件正常触发

实际结果：

报警告，自定义事件无法触发

bug描述：

在使用脚手架创建的vue3+vite项目中，使用原生的自定义组件没有效果，自定义事件无法触发，如果不是脚手架创建的vue3项目，测试虽然有警告，但是自定义事件可以正常触发

更多关于uni-app vue3之后在nvue中使用原生插件打包自定义基座会出现 resolution via compilerOptions.isCustomElement.导致自定义事件无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 1楼

在 uni-app Vue3 + nvue 环境下使用原生插件时，出现组件解析警告和自定义事件无法触发的问题，主要原因是 Vue3 对自定义元素的处理机制与 Vue2 不同。

问题分析：

Vue3 默认会将非原生 HTML 标签视为未知组件并抛出警告
原生插件注册的组件（如 sn-svga-view）在 Vue3 中需要显式配置或通过编译器选项识别
在 nvue 环境中，组件注册机制与 vue 页面有所不同

解决方案：

配置编译器选项 在 vite.config.js 或对应构建配置中，添加自定义元素配置：

// vite.config.js
export default defineConfig({
  plugins: [
    uni()
  ],
  compilerOptions: {
    isCustomElement: tag => tag.startsWith('sn-')
  }
})

显式注册组件 在页面中显式定义自定义组件：

import { defineCustomElement } from 'vue'

export default {
  components: {
    'sn-svga-view': defineCustomElement(/* 组件定义 */)
  },
  // ...其余代码
}

检查原生插件注册 确保在 main.js 或插件配置中正确注册了原生组件：

// 原生插件注册
import svgaPlugin from './plugins/svga-plugin'
app.use(svgaPlugin)

事件处理调整 Vue3 中自定义事件需要通过 emits 显式声明：

export default {
  emits: ['load', 'finish'],
  methods: {
    load(e) {
      this.$emit('load', e)
    }
  }
}