1 问题描述

在 vue3 项目中依据Element Plus官方文档按需引入后,在 .vue 页面中使用 ElMessageElLoading 等组件时出现样式丢失的情况。
在这里插入图片描述

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
        ]
      }
    }
    
Logo

前往低代码交流专区

更多推荐