uni-app引入ant-design-vue运行到app报错

uni-app引入ant-design-vue运行到app报错

表格

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 9.0
手机厂商 模拟器
手机机型 A64主控芯片
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 安装 ant-design-vue
  • 配置main.js
  • 引用DatePicker组件
<a-date-picker  v-model="drawerForm.startDate"></a-date-picker>

预期结果：

正常使用组件，正常弹出日期选择框

实际结果：

运行到手机模拟器报错，先是报错

../../../../works/broadcast-app/node_modules/ant-design-vue/es/form/utils/validateUtil.js (4:16): Error when using sourcemap for reporting an error: Can't resolve original location of error.  
../../../../works/broadcast-app/node_modules/ant-design-vue/es/form/utils/validateUtil.js (4:24): Error when using sourcemap for reporting an error: Can't resolve original location of error.  
../../../../works/broadcast-app/node_modules/ant-design-vue/es/vc-tree/TreeNode.js (4:13): Error when using sourcemap for reporting an error: Can't resolve original location of error.  
../../../../works/broadcast-app/node_modules/ant-design-vue/es/vc-tree/TreeNode.js (4:21): Error when using sourcemap for reporting an error: Can't resolve original location of error.

项目可以正常运行，之后点击组件的时候报错

[Vue warn]: Unhandled error during execution of native event handler  
at <PickermonthCellRender=undefineddateRender=undefinedrenderExtraFooter=undefined ...>  
at <ADatePickerclass="flex-item"modelValue=""onUpdate:modelValue=fn>  
11:29:18.550 TypeError: inputRef.value.focus is not a function

bug描述：

uniapp引入ant-design-vue运行到app报错，运行到h5正常，是不兼容app吗


更多关于uni-app引入ant-design-vue运行到app报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

针对 web 开发的组件库可能用到了浏览器的特定的写法，不兼容跨平台。
针对你这个报错，具体打印在 inputRef.value 是什么，有没有在 onReady/onMounted 里去调用

更多关于uni-app引入ant-design-vue运行到app报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中引入ant-design-vue可能会遇到一些问题，因为ant-design-vue主要是为Vue 2.x和Vue 3.x的Web环境设计的，而uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到H5、小程序、App等多个平台。由于不同平台的差异，特别是小程序和App平台对Vue组件的支持有限，直接引入ant-design-vue可能会遇到兼容性问题。

以下是一个基本的示例，展示如何在uni-app中尝试引入ant-design-vue，并处理可能遇到的问题。但请注意，这只是一个起点，实际应用中可能需要更多的调整和适配。

  1. 安装ant-design-vue

    首先，你需要通过npm或yarn安装ant-design-vue：

    npm install ant-design-vue --save

  2. 引入和注册组件

    在你的main.js或main.ts文件中引入ant-design-vue及其样式：

    import Vue from 'vue'
import App from './App'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

new Vue({
  render: h => h(App),
}).$mount('#app')

  3. 使用组件

    在你的页面或组件中使用ant-design-vue的组件，例如：

    <template>
  <view>
    <a-button type="primary">Primary Button</a-button>
  </view>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style scoped>
/* 你可以在这里添加自定义样式 */
</style>

  4. 处理报错

    如果运行到App时报错，可能是因为某些ant-design-vue的组件或功能在uni-app的某些平台上不被支持。这时，你可能需要：

    • 检查错误日志，了解是哪个组件或功能引起了问题。
    • 尝试替换或修改引起问题的组件。
    • 使用条件编译，为不同平台提供不同的实现。
    • 查找是否有社区提供的针对uni-app的ant-design-vue适配版本或替代方案。

由于uni-app和ant-design-vue的兼容性问题可能比较复杂，上述代码只是一个基本的引入示例。在实际项目中，你可能需要根据具体的报错信息和平台需求进行更详细的调试和适配。

回到顶部