【已解决】vue3+vant 引入Dialog Toast都会失败报错not defined

最新推荐文章于 2025-03-25 00:52:07 发布

希江木

最新推荐文章于 2025-03-25 00:52:07 发布

阅读量6.9k

点赞数 4

分类专栏： # 前端插件/工具文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/baidu_38730364/article/details/120177289

版权

在Vue3项目中使用Vant，遇到Dialog和Toast组件引入后报错未定义。通过尝试在具体使用页面局部引入，而非在main.js全局引入，解决了这个问题。原先在main.js全局引入导致错误，而局部引入避免了错误，实现了正常功能。

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

vant按需引入其他的组件没有问题，但是在引入Dialog时报错not defined.测试中，点击弹出的那个引入也可以，只有Dialog.confirm类似的就会报错，后面测试类似的Toast也是这样。在网上找了好多，都没有具体的解决方法。

后面看到一个帖子给的方法试了下，算是成功了。

我是在main.js里写要引用的组件，这样就可以全局使用了，但是Dialog和Toast上遇到了阻碍，对于这两个，在要使用的地方单独引用就不会报错。

原main.js：

import { Button, Dialog, Popup, Tabbar, TabbarItem,Toast  } from "vant";
import "vant/lib/index.css";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

const app = createApp(App); // 创建实例

app.use(Popup);
app.use(Dialog);
app.use(Button); // 注册组件
// app.use(Dialog);
app.use(Tabbar);
app.use(TabbarItem);
app.use(Toast);

app.use(store);
app.use(router);

app.mount("#app");

最低0.47元/天解锁文章