vue3项目，按需引入Element-plus ElMessage 样式丢失

2023-12-18 14:38:32

文章目录

在这里插入图片描述

Element-plus使用了自动按需导入

vite.config.js配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 按需引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 按需引入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

代码手动导入了API

如下

import { ElMessage } from "element-plus";

ElMessage({
  showClose: true,
  message: '请输入正确的内容',
  type:'error'
})

样式丢失

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

在这里插入图片描述

解决方案

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

ElMessage({
  showClose: true,
  message: '请输入正确的内容',
  type:'error'
})

Eslint报错

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

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

owlcity原文链接

文章来源:https://blog.csdn.net/qq_34082921/article/details/135060630
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。