Vue3 - Element Plus使用消息提示ElMessage样式出错或无法显示，自动导入或按需引入message不显示无效果，解决el-message引入不显示或使用报错无法使用（详细排查）

最新推荐文章于 2025-07-24 10:19:13 发布
最新推荐文章于 2025-07-24 10:19:13 发布
阅读量2.9k 收藏 3
点赞数 13
CC 4.0 BY-SA版权
分类专栏： + Vue3 开发问题汇总 文章标签： element plus vue3 ElMessage message消息提示组件 import按需引入无效 Message样式失效丢失 引入后无法使用不显示提示框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/148808221

前言

关于此问题网上的教程乱七八糟，本文提供排查思路及示例代码。

在 vue3+element-plus 项目开发中，解决页面或组件按需导入或自动导入后，使用ElMessage无效不弹出的问题，或者引入后导致message样式错误（样式不生效或被遮挡等），element plus 使用ElMessage无法正确显示各种问题排查，尤其是按需引入Message消息弹窗组件时明明引入了却不显示无法使用，本文提供详细解决方案。

如下图所示，无论是自动引入还是按需引入，使用无效或样式问题均可。

详细排查，保证搞定

在这里插入图片描述

解决方案

按照下方错误分析说明及示例代码，搞定此问题。

了解本专栏 订阅专栏 解锁全文
Vue3 - Element Plus 消息提示Message组件防止多次弹出问题，解决多次弹框问题让其无论执行多少次都只弹出来一次，设置消息通知无论执行多少次最终只弹一次（彻底搞定重复提示弹窗问题）
资深程序员
10-24 1万+
vue3，element-plus，Message，消息提示组件，ElementPlus通知消息多次弹出问题，消息提示始终只出现一个，解决Message消息弹框重复弹出，无论调用多少次最终只让弹出来一个，axios封装请求拦截器时多个API请求接口导致弹框多次出现如何只出现一次，只有第一次弹出调用组件接口，后面弹出不在调用接口问题解决，最新最好用的解决办法，消息弹窗不重复弹出，如何让ElementPlus的消息提示每次只弹出一个，axios全局封装登录状态登录失效未登录时提示登录框多次触发怎么办，vue3
解决element plus message不显示
qq_26593271的博客
03-08 5191
vue引入element-plus后使用message无效果。
按需引入 ElMessage，没有样式且类型检查失败
阿城的博客
11-26 2479
虽然开发环境可以忍着红线不去管它，可以正常使用，但打包构建会失败。可以看到 vscode 可以给出 ElNotification 的类型提示，说明 ts 已经识别，但 eslint 仍然检查失败。Element-plus 在使用 ElMessage 消息弹框的时候没有样式，按照官方的按需加载的方式引入的。现在 ts 已经不抱类型错误，但如果配置了 eslint，则 eslint 就会开始报错了。配置开启后，默认就会在 vite 文件同级目录中自动生成对应的。其实自动导入已经有了 ts 的类型声明，它就在。
在vue项目中引入element-plus中的ElMessage不起作用（已解决）
Tgess的博客
06-06 490
解决vue项目引入element-plus中的ElMessage不起作用的问题
vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）
M31Gargantua的博客
03-12 5647
vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）
vue3按需导入element-plus后使用ElMessage报错或样式丢失
m0_37922443的博客
05-18 3924
vue3按需导入element-plus后使用ElMessage报错或样式丢失
Vue3使用ElementPlus自动导入时ElMessage无法显示的问题解决
xjy9866的博客
07-01 224
不用import 导入包。
element plus 使用ElMessage无法正确显示
m0_73440809的博客
04-22 690
在使用时遇到的一个问题，element plus 使用ElMessage无法正确显示一是显示在整个页面组件的最底部，二是没有样式错误显示正确显示。
element-plus中的ElMessage消息提示 没有弹出提示
2301_76864313的博客
08-19 1343
【代码】element-plus中的ElMessage消息提示 没有弹出提示。
ElementUI 之 Message，自动弹出，信息不显示问题
weixin_30670925的博客
08-12 2101
Vue.use() 这种写法可能会页面刷新时自动弹出 message，可将下图红框里换成 Vue.component(Message) 转载于:https://www.cnblogs.com/zhangym118/p/11340668.html
vue3+element-plus：实现全局修改Message消息提示弹框的持续时间，项目统一配置message的弹窗时间，设置提示框停留时间（只需要一次配置Message方法改变所有的弹框悬停时间）
高级前端工程师
06-25 2572
全局修改elementPlus的message的显示时间，如何改变element-plus框架的message弹框提示时间，提示框修改停留时间以及修改位置，如果对每一个message方法都去配置duration会太麻烦，一次运行将message的悬停时间全部修改不用每次配置了，全局修改element的message的持续时间，element-plus el-message 全局修改延迟时间，持续时间太长怎么办，整个项目全部修改提示语的时长，提示框修改停留时间以及修改位置，全局修改element的$messa
vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办
热门推荐
高级前端工程师
06-28 1万+
elementPlus，vue3，element plus el-cascader 回显，级联选择器，回显，懒加载，el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点，级联选择器动态懒加载以及回显，解决el-cascader回显失败问题，三级联动数据回显，省市区回显，el-cascader 动态加载，编辑时数据回显，Element-plus Cascader级联选择器动态加载模式下数据回显时的问题，el-cascader列表是动态的怎么回显，赋值后，不回显怎么办，数据还没加载怎
vue3 - 实现element plus表格组件table动态添加或删除行功能，表格列表动态新增插入/删除表格行，可编辑单元格/点击修改表格内数据并更新数据列表（可接口懒加载、表格分页、复杂嵌套表格
高级前端工程师
12-22 7213
vue3，element-plus，表格Table组件，el-table，动态表格，实现表格动态增加/删除/编辑表格行，带有校验规则，自定义表格增删改查，动态表格动态数据新增修改删除，vue3+Element Plus动态生成表格，并实现内容可编辑，如何实现表格动态增加/删除/编辑表格行(带校验规则)，数据有分页，懒加载如何更新，嵌套带下级的表格如何更新，不调用api接口怎么更新数据，示例代码，表格可编辑单元格自定义数据化结构新增删除取消，动态数据表格，表格动态添加或删除行，查询重置新增编辑回显删除，行内编
element-plus 组件 ElMessage、ElLoading 弹框 和加载css 样式展示异常总结
最新发布
_1531613221
07-24 345
本文总结了解决Vue3+TS项目中Element Plus组件引入问题的三种方案：1)删除手动引入后可能出现报错但项目可运行；2)修改vite.config.ts配置，调整AutoImport设置解决组件不显示问题；3)推荐安装sass-embedded解决CSS样式异常。方案二详细提供了vite配置代码，包括自动导入样式文件和API式组件的处理；方案三强调需优先安装sass-embedded。三种方案逐步深入，最终彻底解决组件引入和样式问题。
【已解决】Vue3使用Element-plus按需加载时消息弹框ElMessage没有样式
前端界的小学生
06-22 5414
Element-plus在使用ElMessage消息弹框的时候没有样式，按照官方的按需加载的方式引入的。
在vue3中全局使用element组件库的message组件
2303_76675983的博客
05-13 502
1.已知：项目已经下载了element-plus并且在 main.js文件中引入。使用方法：1.在main.js文件中添加。2.在需要使用的vue文件中。
解决：模块 ““element-plus““ 没有导出的成员 “ElMessage“。你是想改用 “import ElMessage from “element-plus““ 吗?
weixin_71403100的博客
07-04 2722
使用vue3+vite+ts+Element Plus开发项目，项目运行时是正常的，但会有错误显示，如下：二、错误内容：模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?
Vue3 - Element Plus 消息提示Message组件防止多次弹出问题
11-21
Vue3 中的 Element Plus 的 Message 组件有时可能会遇到多次弹出的问题，这通常是由于在未处理好关闭事件或者未正确管理组件状态的情况下发生的。为了避免这种情况，你可以采取以下策略： 1. **阻止默认行为**：在...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔡来了

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值