Element Plus MessageBox样式不符预期，如何正确应用样式？

使用 Vue 搭配 Vite 和 ElementPlus 开发时，按官方文档配置项目后，发现 MessageBox 组件样式与官方展示效果不符（当前样式如下），但其他 ElementPlus 组件渲染正常。

以下是可复现问题的最小项目代码：

App.vue #

<template>
  <el-button text @click="open">Click to open the Message Box</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK'
  })
}
</script>

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()],
    })
  ],
  base: ''
})

页面入口（index.html） #

<!DOCTYPE html>
<title>Vite + Vue</title>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>

main.js #

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

package.json #

{
  "name": "v2",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^20.0.2",
    "element-plus": "^2.2.12",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.2",
    "unplugin-auto-import": "^0.11.1",
    "unplugin-vue-components": "^0.22.4",
    "vite": "^3.0.6"
  }
}

解决方案 #

问题根源是：MessageBox 属于 ElementPlus 的方法类组件，不是常规标签组件，unplugin-vue-components 无法自动识别并导入其样式，导致样式缺失。以下是三种可行解决方式：

方案1：修改自动导入配置，开启样式自动导入

在 vite.config.js 中，给 ElementPlusResolver 添加样式导入配置，让插件自动处理方法类组件的样式：

// vite.config.js
AutoImport({
  resolvers: [ElementPlusResolver({
    importStyle: 'sass' // 若项目用纯css则改为'css'
  })],
}),
Components({
  resolvers: [ElementPlusResolver({
    importStyle: 'sass' // 同上
  })],
})

方案2：手动导入 MessageBox 样式

在 main.js 中直接引入 MessageBox 的样式文件：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
// 手动引入MessageBox的css样式
import 'element-plus/es/components/message-box/style/css'

createApp(App).mount('#app')

方案3：全局引入 ElementPlus 所有样式

如果项目不需要按需导入的优化，可以直接全局引入ElementPlus完整样式：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'

createApp(App).mount('#app')

推荐使用方案1，既能保留按需导入的优势，又能自动处理所有组件（包括方法类）的样式。

内容的提问来源于stack exchange，提问作者jakubiszon