[JavaScript知识库] vite+vue3中按需引入elementPlus后的Elmessage与Elloading不显示的坑

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vite+vue3中按需引入elementPlus后的Elmessage与Elloading不显示的坑 -> 正文阅读

[JavaScript知识库]vite+vue3中按需引入elementPlus后的Elmessage与Elloading不显示的坑

vite+vue3项目中配置封装axios过程中，用到了elloading与elmessage，测试的时候发现不显示。

import Axios, {
  AxiosInstance,
  AxiosRequestConfig,
  AxiosResponse,
  AxiosError
} from 'axios';
import { ElLoading, ElMessage } from 'element-plus';

let loadingInstance: any;
const startLoading = () => {
  loadingInstance = ElLoading.service({
    lock: true,
    text: '加载中……',
    background: 'rgba(0, 0, 0, 0.7)'
  });
};
function endLoading() {
  loadingInstance.close();
}

在axios的响应拦截中当状态为403时需要用到Elmessage进行提示并跳转登录页

if (status === 403) {
          removeToken();
          router.push({ path: '/login' });
        }
        if (status !== 0) {
          ElMessage({
            message: message,
            type: 'error',
            showClose: true,
            offset: 50
          });
          tryHideFullScreenLoading();
          return Promise.reject(new Error(message));
        }
        tryHideFullScreenLoading();
        return response;
      },

结果发现页面中不显示loading也不显示elmessage，只能说vite中的elementPlus按需引入官方都没有配置全面导致这么多坑，el-icon也需要再去配置，而不是真正的按需引入了，上一篇文章中也详细说明了el-icon如何配置方便组件中直接使用。好了废话不多说，直接在项目的main.js中再把Elmessage和Elloading的样式引入就解决问题了
//main.js文件

import { createApp } from 'vue';
import router from './router/index';
import App from './App.vue';
import { createPinia } from 'pinia';
import * as Elicons from '@element-plus/icons-vue';
//引入Elmessage和Elloading的css样式文件
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message.css';

const app = createApp(App);
const pinia = createPinia();
//全局注册elementplus icon
Object.keys(Elicons).forEach((key) => {
  app.component(key, Elicons[key as keyof typeof Elicons]);
});
app.use(router);
app.use(pinia);
app.mount('#app');