关于vue按需引入ElMessage和ElMessageBox未被自动引入到auto-important的问题

?

1 2 3 4 5 6 7

相信关于按需引入大家应该都会了，不论是官网还是百度一大堆教程 我这边也是参照https://github.com/youlaitech/vue3-element-admin的写法去写的-----需要的可以去看看   这里复述一遍，作为笔记： 首先安装unplugin-vue-components 和 unplugin-auto-import这两款插件 npm install -D unplugin-vue-components unplugin-auto-import yarn add -D unplugin-vue-components unplugin-auto-import

 做完这些操作后查看auto-imports.d.ts

没有自动导入messagebox提示弹窗

 一开始我都不知道这回事，后面在ts里面调用messagebox的时候发现还要引入，我寻思不是按需引入么，怎么还要引入，于是发生了刚刚一系列事件

网上找到这么一篇文章

vite + vue + ts 自动按需导入 Element Plus组件，并如何解决按需引入后ElMessage与ElLoading 的问题（找不到名称“ElMessage”问题。）

文章写的很好，也有解决方案，不过我比较轴，我非不这么干

最终，终于让我找到问题所在，

答案：按需引入的原理是监听vue页面，ts页面先行使用的话不会被监听到，只有vue页面使用了，后面再刷新按需引入，则auto-import才会更新内容

发现原因：在创建项目初期，搭框架的时候，谁去在vue里面写弹窗啊，弹窗一般只有做提示信息的时候才能用到，也就是ts文件，而我一般会先把框架搭完才会写页面，像pinia，router，axios拦截器，svg，多语言之类的先搞完，正好写到拦截器，需要弹窗，于是发现了这个问题，并记录下来。

可能会出现的情况：有时候删除d.ts重新生成messageBox会丢失，不用着急，等一段时间就好了，这个时间有点长。

警醒后面的学习者；

想看看有多少遇到这个问题的兄弟，遇到了的话，点个收藏，我看看有多少轴子在我这里的到了解脱0.0

最后放张我解决后的截图