Vue3 项目中按需引入 Element Plus 后使用组件时样式丢失

1 问题描述

在 vue3 项目中依据Element Plus官方文档按需引入后，在 .vue 页面中使用 ElMessage、ElLoading 等组件时出现样式丢失的情况。

2 引发原因

按需引入仅引入了相关组件，未引入全局样式或者按需引入组件样式。

3 解决方法

1. 安装 unplugin-element-plus

   npm i unplugin-element-plus -D
   

2. 在 vue.config.js 中引入并配置

   // vue.config.js
   const AutoImport = require('unplugin-auto-import/webpack')
   const Components = require('unplugin-vue-components/webpack')
   const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
   // 引入unplugin-element-plus
   const ElementPlus = require('unplugin-element-plus/webpack')
   
   module.exports = {
     chainWebpack: config => {
       config
         .plugin('html')
         .tap(args => {
           args[0].title = 'xxx管理后台'
           return args
         })
     },
     configureWebpack: {
       plugins: [
         AutoImport({
           resolvers: [ElementPlusResolver()]
         }),
         Components({
           resolvers: [ElementPlusResolver()]
         }),
         ElementPlus() // 配置unplugin-element-plus
       ]
     }
   }