Message消息组件怎么在Vue3里全局调用？

Tr° 诗辰提问于 2026-03-19 17:18:18 阅读 4

组件

我用的是Element Plus的Message组件，想在axios拦截器里直接弹错误提示，但不知道怎么全局调用。试过ElMessage.error('出错了')，结果报错说ElMessage is not defined。

我在main.js里已经按需引入了Message：

import { createApp } from 'vue'
import App from './App.vue'
import { ElMessage } from 'element-plus'

const app = createApp(App)
app.use(ElMessage)
app.mount('#app')

但这样好像不行，是不是注册方式有问题？

反馈组件

我来解答赞 5 收藏

反馈

1 条解答

付娟 Dev Lv1

你的问题在于 app.use(ElMessage) 这种注册方式根本不对。use() 是用来安装插件的，但 ElMessage 本身不是插件，你这么整当然会报错。

最简单直接的解决办法：直接在需要用的地方导入，别的配置都不用改。

在你的 axios 拦截器文件里这样写：

import { ElMessage } from 'element-plus'

import axios from 'axios'



const service = axios.create()



service.interceptors.response.use(

  response => response,

  error => {

    // 直接导入就能用

    ElMessage.error('出错了')

    return Promise.reject(error)

  }

)



export default service

完事儿，不需要在 main.js 里搞任何骚操作。

如果你实在想在 main.js 里全局挂载（类似于 Vue2 的 Vue.prototype），可以这样：

import { createApp } from 'vue'

import App from './App.vue'

import { ElMessage } from 'element-plus'



const app = createApp(App)

app.config.globalProperties.$message = ElMessage

app.mount('#app')

然后在组件里用 this.$message.error('xxx')，但说实话没啥必要，多导入一行的事儿更省心。

血泪教训：Element Plus 的组件和 Vue2 的 Element 玩法不一样，很多新手（包括以前的我）会惯性思维去用 use() 注册，结果踩坑。直接导入才是正道。

2026-03-19 17:25