Vue3+vant库处理showToast报错正确姿势：Can‘t resolve ‘vant/es/show-toast‘-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3+vant库处理showToast报错正确姿势：Can‘t resolve ‘vant/es/show-toast‘。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 . 首先，要排除是自己配置全局引用错误导致的问题

2. 排除不是自己引用问题，进入下一步

移除 babel-plugin-import

3. 在此时，似乎就已经解决showToast报错问题，

环境： "vant": "^4.6.3",

1 . 首先，要排除是自己配置全局引用错误导致的问题

要确保自己引用Toast没问题

can't resolve 'vant,vant,vue.js,前端

在vue页面正确的使用Toast相关提示框 can't resolve 'vant,vant,vue.js,前端

can't resolve 'vant,vant,vue.js,前端

这里关于app.use(vent相关组件) ，个人建议写在注入路由app.use(router)的上面，

因为我之前貌似刚开始用vant因为use顺序问题，导致vant死活不生效，，，

备忘：今天是刚开始用vant库的第4天，部分使用vant某个组件报错等等，一般会在vant官方相对应组件页面底部有官方解决问题指导

参考官方指导文档解决showToast报错办法

从 Vant 4.0 开始，将不再支持 babel-plugin-import，请移除项目中依赖的 babel-plugin-import 插件。

只需要删除 babel.config.js 中的以下描红代码即可：

module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};

但是你会发现vue项目热加载，还是报该错误

can't resolve 'vant,vant,vue.js,前端

这个时候，你需要ctrl+c终止该vue项目运行

重新运行项目，

yarn serve

你将会发现showToast报错消除

can't resolve 'vant,vant,vue.js,前端

上面为2023/8/5

8/28,

发现自己main.js全局注册vant库的方式欠妥, 改为以下方式全局注册更加简洁,

import Vant from 'vant'

import 'vant/lib/index.css'

const app = createApp(App)

app.use(Vant)

这样除了Toast信息vant组件外,其他vant组件就不用像我开始上面那样手动指定注册文章来源地址https://www.toymoban.com/news/detail-771651.html

到了这里，关于Vue3+vant库处理showToast报错正确姿势：Can‘t resolve ‘vant/es/show-toast‘的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！