Element-plus按需导入时ElMessage失效（Eslint9.x,Vue3）

最新推荐文章于 2025-07-01 15:18:51 发布

努力学Java的小许

最新推荐文章于 2025-07-01 15:18:51 发布

阅读量530

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_72642362/article/details/145972453

首先明确一点，如果使用element-plus的按需自动导入(如下图)，在用到Message消息提示的时候，不需要去使用import {ElMessage} from 'element-plus'，如果手动在某个组件中使用import {ElMessage} from 'element-plus'，则会出现这个消息提示失败的现象，这时候只需要删去引入或者是注释掉，同时如果用了Eslint，这时候会报错，我们需要在Eslint（我用的是9.20.1版本）的配置文件中加上全局变量，

修改如下图所示在eslint.config.js中加入(项目使用pnpm create vue创建，并且在创建时选择了Eslint):

  {
    languageOptions: {
      globals: {
        ElMessage: 'readonly',
        ElMessageBox: 'readonly',
        ElLoading: 'readonly',
      }
    }
  }