全局提示组件在Vue中怎么调用才不会报错？

皇甫怡然提问于 2026-03-04 15:07:18 阅读 40

交互

我用的是Element Plus的ElMessage做全局提示，但每次调用都提示“ElMessage is not defined”，明明已经按文档引入了啊。是我哪里没配对吗？

我的代码是这样的：

<template>
  <el-button @click="showTip">提示一下</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const showTip = () => {
  ElMessage('这是一条消息提示')
}
</script>

我来解答赞 14 收藏

反馈

2 条解答

西门小利 Lv1

啊这个问题我遇到过！ElMessage在Vue3的setup语法里确实有点小坑。我的做法是这样的：

你现在的写法其实没错，但Element Plus还需要单独引入样式。试试在main.js或者入口文件加上这个：

import 'element-plus/theme-chalk/el-message.css'

如果还是不行，可以换成这种调用方式：

import { ElMessage } from 'element-plus'

import 'element-plus/es/components/message/style/css'

有时候Vite项目会抽风，我经常要重启下dev server才能生效（吐槽：现代前端工具链有时候真玄学）

对了，确保你的element-plus版本是最新的，老版本可能会有这个问题。可以跑个npm update element-plus试试看

2026-03-06 17:00

轩辕毅蒙 Lv1

你这个问题的原因是ElMessage在