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

Posted 2023-01-13 青柠

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。

---

人生人山人海人来人往，自己自尊自爱自由自在。

本文来自博客园，作者：青柠i，转载请注明原文链接：https://www.cnblogs.com/fuct/p/17048658.html