在Vue3+ElementPlus中，配置按需导入后，以服务的方式调用ElLoading，但页面中不显示

Element-plus中使用Loading，样式丢失

背景：

Vue3 + Element-Plus,使用了按需导入。

import { ElLoading } from 'element-plus';

ElLoading.service({
lock: true,
text: '正在卖力加载中....'
});

页面中，Loading样式不对，没有全屏覆盖。

解决：

第一种：

删除import导入，这时ElLoading.service会报ts类型错误，这时候拦截一下：//@ts-ignore;

// 删除该导入
import { ElLoading } from 'element-plus';

第二种：

直接导入样式：

import 'element-plus/theme-chalk/el-loading.css';

第三种：

下载Webpack插件：unplugin-element-plus/webpack

npm i -D unplugin-element-plus/webpack

在vue.config.js中：

const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

// 添加这一行
const ElementPlus = require('unplugin-element-plus/webpack');

module.exports = defineConfig({
  // transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),
      // 添加这一行
      ElementPlus()
    ]
  }
});

使用Vite构建项目的话，把unplugin-element-plus/webpack更改unplugin-element-plus/vite。