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

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

背景：

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

import { ElLoading } from 'element-plus';

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

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

解决：

2023年7月5日--------更新
如果我们之前是通过按需导入ElementPlus的，按照文档示例代码中会import导入组件。这就是错误之一，已经配置了按需导入就无需import导入，直接使用。但这时候就会发现TS报错--找不到名称“ElLoading”。这是因为我们通过插件自动导入的组件的声明在auto-imports.d.ts文件中，而tsconfig.json配置中没取到该文件的声明，所以我们只需在tsconfig.json中增加：

"include": [
    "auto-imports.d.ts"
]

以下旧的解决办法可以不用看了，之前没认清真相走的弯路

---

---

第一种：

删除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。