ElementPluss使用消息类组件样式缺失的问题（ElLoading、ElMessage、ElNotification、ElMessageBox）

最新推荐文章于 2025-07-18 10:02:39 发布

Small_Sheep_Fish

最新推荐文章于 2025-07-18 10:02:39 发布

阅读量744

点赞数 7

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_65039404/article/details/145842363

首先此问题建立在，引入组件库的方式为按需自动引入的方式下：也就是项目按照官方所说的下载了相应插件，配置了自动引入，如果你没配置且想配置请跳转以下链接，按照文档进行配置

ElementPlus官方文档-快速上手（进入后下滑至图片位置）

在这种情况下，使用类似以下代码：

import { ElNotification } from 'element-plus' // 这句是关键
ElNotification({
  title: '提示',
  message:
    '您的申请已提交。',
  type: 'success',
  duration: 15000
})

最终结果：组件是出来了，但是没有任何动画效果和样式，f12查看元素也发现没有样式类，

那么你可以试试去掉import语句（如果你的编译器没有配置严格的校验），此时下面代码中的组件名字就会报错（xxx未定义-之类的），如果可以运行，浏览器不报错，那么不出意外，浏览器中的效果就完美显示了，样式也有了。

原因是我们已经配置了按需自动引入了，所以不需要再手动import，虽然会报错，但资源确实是引入了，这是编译器的问题，编译器看不出来你自动引入了，因为那个插件的引入是隐式的，在编译器看来你从来就没定义过ElNotfication这个东西，所以报错（至于手动引入为啥不带样式文件我不清楚，貌似需要单独引入样式文件）。那么问题就缩小到让编译器忽略这个错误上了，这方式就很多很多了。我在这里提供自己的方法如下：

前提，我使用了eslint来进行代码校验，在eslint的配置文件中，可以配置全局变量如下：

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly',
    ElNotification: 'readonly'
  }
}

注意我使用的eslint8.x的配置文件方式，9.x的配置文件和格式都完全不同。可以看到我将常用的消息组件的名称都声明了全局变量，让编译器认为此变量在文件中不需要再声明，如此即可让编译器忽略掉此问题。