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

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原文链接