uni-app中使用vue3无法引入wxcomponents中的组件，改为vue2则正常

uni-app中使用vue3无法引入wxcomponents中的组件，改为vue2则正常

操作步骤：

将manifest.json中的vue版本设为3时，重新编译运行后wxcomponents下的组件不会被加载。改为vue2后可以正常加载

预期结果：

将manifest.json中的vue版设为3时，首页应该显示wx组件中的test字符串

实际结果：

将manifest.json中的vue版设为3时，首页没有显示wx组件中的test字符串，并且在控制台报了警告 [Vue warn]: Failed to resolve component: test-component If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

bug描述：

自定义一个简单的wx组件test-component。 按照uni官网文档引入微信组件，发现vue版本为2的时候可以正确引入，但是在vue版本为3的时候则引入失败

信息 描述
产品分类 uniapp/H5
PC开发环境 Mac
操作系统版本 Monterey 12.4
HBuilderX 正式
版本号 3.4.7
浏览器平台 Chrome
浏览器版本 102.0.5005.61
项目创建方式 HBuilderX

Image 1 Image 2 Image 3 Image 4 Image 5 Image 6


更多关于uni-app中使用vue3无法引入wxcomponents中的组件，改为vue2则正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

vue3版本h5，app平台不再支持wxcomponent组件，建议使用标准的vue组件，如有需要，可以到插件市场寻找https://ext.dcloud.net.cn/

更多关于uni-app中使用vue3无法引入wxcomponents中的组件，改为vue2则正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的

在 uni-app 中使用 Vue 3 时，如果你无法引入 wxcomponents 中的组件，而切换到 Vue 2 时正常，这可能是由于 Vue 3 和 Vue 2 在组件注册和生命周期管理上的差异导致的。以下是一些可能的原因和解决方案：

1. 组件注册方式不同

在 Vue 2 中，你可以通过 Vue.component 全局注册组件，而在 Vue 3 中，组件的注册方式有所变化。你需要确保在 Vue 3 中正确地注册了 wxcomponents 中的组件。

解决方案： 在 Vue 3 中，你可以使用 app.component 来全局注册组件。例如：

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from 'wxcomponents/MyComponent.vue';

const app = createApp(App);
app.component('my-component', MyComponent);
app.mount('#app');

2. 生命周期钩子的变化

Vue 3 中的生命周期钩子与 Vue 2 有所不同。如果你在 wxcomponents 中使用了 Vue 2 的生命周期钩子，可能会导致在 Vue 3 中无法正常工作。

解决方案： 确保你在 wxcomponents 中使用的生命周期钩子与 Vue 3 兼容。例如，beforeCreate 和 created 在 Vue 3 中仍然可用，但 beforeMount 和 mounted 等钩子的行为可能有所不同。

3. Composition API 的使用

Vue 3 引入了 Composition API，如果你在 wxcomponents 中使用了 Options API，可能需要做一些调整。

解决方案： 如果你希望在 Vue 3 中使用 Composition API，可以尝试将 wxcomponents 中的代码迁移到 Composition API。例如：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      count,
    };
  },
};

4. 插件或库的兼容性

某些插件或库可能尚未完全兼容 Vue 3，导致在 Vue 3 中无法正常工作。

解决方案： 检查你使用的插件或库是否支持 Vue 3。如果不支持，可以尝试寻找替代方案或等待插件更新。

5. uni-app 的版本问题

uni-app 的不同版本对 Vue 3 的支持可能有所不同。确保你使用的 uni-app 版本支持 Vue 3。

解决方案： 更新 uni-app 到最新版本，并确保项目中使用的 Vue 3 版本与 uni-app 兼容。

6. 检查 wxcomponents 的路径和引入方式

确保你在 Vue 3 中正确引入了 wxcomponents 的路径，并且路径没有错误。

解决方案： 检查 wxcomponents 的路径是否正确，并确保在 Vue 3 中正确引入。例如：

import MyComponent from '@/wxcomponents/MyComponent.vue';
回到顶部