vant 按需引入Object(...) is not a function报错

最新推荐文章于 2024-03-19 08:52:53 发布
最新推荐文章于 2024-03-19 08:52:53 发布
阅读量2.8k 收藏 2
点赞数 6
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42266115/article/details/114667995
版权
本文记录了一个关于Vue2项目中引入Vant组件库出现的问题及解决过程。作者因错误地按照Vue3的方式引入Vant导致页面空白并报错。发现问题所在后，通过重新下载并确认Vant版本与Vue版本匹配解决了该问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我一直检查没发现我引入vant的方式有问题啊，跟着官方文档走。
在main.js里面
在这里插入图片描述
然后运行就一直报错
在这里插入图片描述
并且页面一直空白，然后疯狂找资料。。。
最后发现是我vue 的版本是2，然后我是使用vue3的方式引入的vant…
知道原因后重新下载vant
在package.json文件中查看重新安装后的vant版本，都是2后重新启动就正确了。
在这里插入图片描述

重点：在这里插入图片描述

Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 2940
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
vue使用vant 报错Object(...) is not a function
qq_42833778的博客
06-23 2714
@[TOC](vue使用vant 报错Object(…) is not a function) 首次vue-cli 使用vant的小坑, 各位老铁注意, 直接上代码 使用vant时报错 如下: 原因: vue的版本和vant的版本不对, 此处vue的版本不是脚手架vue-cli 或者 @vue/cli的版本, 可在项目package.json 中查看, 如果不是同一版本的, 需要把vant的版本卸载重新安装 卸载vant 执行命令 npm uninstall vant ...
按需引入vant报错Object(...) is not a function
swx999的博客
01-28 1792
先检查单词大小有没有写错，如果各方面都没有错误的话，检查一下vant版本，如果是3，修改版本为2的就可以了 报错信息： 解决办法，看vant版本：
vue使用vant第三方vant报错：Uncaught TypeError: Object(...) is not a function at eval，终端有黄色提醒
weixin_48302334的博客
12-15 5765
666
全局引入vant组件库 报：Object(...) is not a function错误
weixin_51629637的博客
04-01 2109
2022.4-1 bug记录：在vue2脚手架中，全局引入vant组件库，使用使用vue ui 安装vant依赖，页面显示空白，报Object(...) is not a function错误 报错原因：vue ui 安装的是最新vant的3.4.7版本，适用于vue3的，vue2不适用 解决方法：在vue ui里面删除vant依赖包，使用npm 安装 2.点几版本的vant，重新npm run serve 就可以正常运行了，安装后可在package.json文件查看版本 # Vu..
this.$message ,this.$confirm is not a function问题解决
山谷里的杂货铺
08-12 1258
代码之前都没有报这个错，但是今天突然报这个错，关于这块的代码也没有做过改动，但是引入了ant-design-vue这个框架，最后百度发现就是引入这个包造成的，把这行代码注释掉问题就解决了 ...
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
fwdwqdwq的博客
03-07 3093
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
uniapp学习（遇到的坑）
weixin_58896221的博客
07-28 2941
vant组件初步引用报错问题，axios,mockjs，Toast直接使用报错，vuex
Vant Weapp的Dialog.confirm组件报错？
m0_46585103的博客
11-21 1334
解决Vant Weapp的Dialog.confirm组件报错
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
10-16
主要给大家介绍了关于微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue引入组件vant组件Dialog报错的解决方案
javascript和jq设置金额整数与小数点后面的字体大小
03-26 5231
vue脚手架引入了vant组件，我采用的是按需导入，在局部组件用到时，就在局部调用，其它组件局部调用都没什么问题，但当我用到了Dialog组件时就报错了，局部调用Dialog的代码如下： import {Field,Picker,Popup,Button,Dialog } from 'vant' components:{ [Aber.name]: Aber, ...
$confirm is not a function($confirm报错的解决方法)
jin_ba_dao的博客
10-18 8615
element $confirm is not a function (解决方法) **解决方法:**如下图所示: 引入MessageBox弹框 把上图的this.$confirm改为MessageBox.confirm 即可 谢谢
JS应用push时提示push is not a function该如解决
tianxianghuiwei的博客
03-19 1680
push() 方法可向数组的末尾添加一个或多个元素，
记录一个Vue3使用Vant的Dialog的错误
weixin_50846239的博客
11-30 940
原先代码是这样的，调用vant.Dialog.alert()来弹出消息对话框，但是console里一直提示Dialog is not defined错误。
(0 , _api_index__WEBPACK_IMPORTED_MODULE_3__.default) is not a function
qq_45659638的博客
06-22 1409
这样浏览器控制台就不会报错啦。
XXX_WEBPACK_IMPORTED_MODULE_0 is not a function
qq_44327851的博客
09-08 1590
当我在angular项目中npm i split.js （分割视图布局的轻量级工具，会有一篇单独的文章讲述这个的使用）依赖 成功之后，然后在我需要使用的模块中.ts文件中进行引入，起初的引入是这样的 import * as Split from 'split.js'，就此运行项目，控制台一直报错，Split_WEBPACK_IMPORTED_MODULE is not a function。改变的引入的层级，多加一级，完全奏效！1.报错背景：安装依赖引入使用时报错。2.解决方法：改变的引入的层级。
Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_42__.defineComponent) is not a function
weixin_56541207的博客
03-16 7789
运行vue项目，web端没有任何显示，按F12出现： app.js:271 Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_42__.defineComponent) is not a function
computed和watch的区别
qq_43653325的博客
02-01 446
···js 一watch擅长处理的场景：一个数据影响多个数据 不支持缓存，数据变，直接会触发相应的操作； 2.watch支持异步； 3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值； 当一个属性发生变化时，需要执行对应的操作；一对多； 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数， 　　immediat...
vue使用wx.showModal报错 wx.showModal is not a function
最新发布
08-08
Vue.js 和微信小程序 (WeApp) 的结合通常需要在 Vue 实例的 created 或 mounted 钩子函数中导入微信提供的 JSAPI。如果你在使用 `wx.showModal` 这个方法时遇到 "不是一个函数" 的错误，这可能是因为以下几个原因： 1. **缺少导入**：确保你在 Vue 组件里正确地引入了微信小程序的 API。例如，在 Vue 文件中添加： ```javascript import { showModal } from '@vant/weapp'; ``` 2. **初始化问题**：确保你在创建实例后对 wx 进行了初始化，如果是在 Vue 中，可以在生命周期钩子 `beforeCreate` 或 `created` 中设置： ```javascript created() { this.$on('mpPageReady', this.initWechatApi); }, methods: { initWechatApi() { wx.init(); wx.login(); // 如果需要登录功能 wx.showModal = showModal; // 初始化 modal 方法 } }, mounted() { if (!this.$mpPageReady) { this.$once('mpPageReady', this.initWechatApi); } else { this.initWechatApi(); } } ``` 3. **生命周期顺序**：确保在调用 `showModal` 之前已经完成了初始化过程。 4. **版本冲突**：检查你的 @vant/weapp 是否是最新的，并且与微信小程序的 SDK 版本兼容。 5. **全局引用问题**：如果你在 App.vue 中设置了全局引用，确保正确配置了并生效。 如果上述步骤都确认无误，问题可能还是出在某个特定场景下。记得检查错误日志，看看是否有其他相关的堆栈信息来帮助诊断。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值