vite+vue3中按需引入elementPlus后的Elmessage与Elloading不显示的坑

vite+vue3项目中配置封装axios过程中，用到了elloading与elmessage，测试的时候发现不显示。import Axios, {AxiosInstance,AxiosRequestConfig,AxiosResponse,AxiosError} from 'axios';import { ElLoading, ElMessage } from 'element-plus';le

filerat

11314人浏览 · 2022-04-08 14:41:56

filerat · 2022-04-08 14:41:56 发布

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');