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

最新推荐文章于 2024-03-26 18:24:48 发布

萨拉伊丁

最新推荐文章于 2024-03-26 18:24:48 发布

阅读量1.3k

点赞数 2

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_40895460/article/details/127947565

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

问题重现

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: "请求超时或服务器错误!",
});

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

解决方案

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

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

Eslint报错

将 package.json 的"eslintConfig" 里加 globals设置

   "globals": {
      "defineEmits": "readonly",
      "defineProps": "readonly",
      "defineExpose": "readonly",
      "withDefaults": "readonly",
      "WeixinJSBridge": "readonly",
      "ElMessage": "readonly",
      "ElMessageBox": "readonly",
      "ElLoading": "readonly"
    },