vue3项目,Element-plus ElMessage API 调用样式丢失问题

问题重现

1、Element-plus使用了自动按需导入,vite.config.js配置如下:

defineConfig({
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })

2、代码手动导入了API,如下

import { ElMessage } from "element-plus";

ElMessage({
    type: "error",
     message: "请求超时或服务器错误!",
});

此时会出现样式丢失问题。

image.png

解决方案

将上述代码导入import部分的代码去掉,直接调用。

ElMessage({
    type: "error",
     message: "请求超时或服务器错误!",
});

Eslint报错

ElMessage等都加入到.eslintrc globals字段里面

module.exports = {
 globals: {
   defineEmits: "readonly",
   defineProps: "readonly",
   defineExpose: "readonly",
   withDefaults: "readonly",
   WeixinJSBridge: "readonly",
   ElMessage: "readonly",
   ElMessageBox: "readonly",
   ElLoading: "readonly",
 }
}

element-plus

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容