vue项目，cli3、cli4中使用element-ui，at Object.../node_moudles/element-ui/...错误

初次使用cli4搭建项目，将cli3项目的api以及request配置复制进来，在home组件中导入封装好的请求方法，项目可以运行，但该home组件无法显示，当路由在其他页面时也无法通过tabbar跳转到home页面，每次尝试跳转到home组件都会在控制台报错

报错信息如下：
因cli的版本问题，使用element-ui的方法也有所变动，旧写法不适配cli4（注意，cli3的写法注释在cli4上）：

在项目总目录下执行

npm install --save element-plus

main.js中导入element-plus进行安装

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-plus';
import 'element-ui/lib/theme-chalk/index.css';

//不要忘记use一下来安装
createApp(App).use(store).use(router).use(ElementUI).mount('#app')

举例：在utils/request.js中的配置，使用element-ui的Message来提示用户请求出错等问题

import axios from 'axios'
// import { Message } from 'element-ui'
import ElementUI from 'element-plus';

const service = axios.create({
    baseURL:"/api",
    timeout: 30000 // request timeout
});

/**
 * 请求拦截器(前置钩子)
 * 在发送请求之前都会首先执行的方法。比如 带上token
 */
service.interceptors.request.use(config=>{
    console.log("=============request==============")
    return config
});

/**
 * 响应拦截器
 * 在返回数据之后都会首先执行的方法。比如判断 token是否过期,过期了怎么处理
 */
service.interceptors.response.use(response=>{
        // console.log("=============response==============")
        const data=response.data;
        if(data.code==40000) {
            console.log(response)
            //Message({
            //  showClose: true,
            //  message: "token过期,请重新登录",
            //  type: 'warning'
            //});
            ElementUI.Message({
                showClose: true,
                message: "token过期,请重新登录",
                type: 'warning'
            });
        }
        return response
    },
    error => {
        console.log('err' + error) // for debug
        // Message({
        //     message: '请求异常：'+error.message,
        //     type: 'error',
        //     duration: 30 * 1000
        // });
        ElementUI.Message({
            message: '请求异常：'+error.message,
            type: 'error',
            duration: 30 * 1000
        });   
        return Promise.reject(error)
    });
    
export default service

最后记得重新npm run serve 一下

顺便附上api/index.js配置

import request from '../utils/request'
import ElementUI from 'element-plus';

//1秒后页面刷新
export function f5() {
    setTimeout(function(){
        location.reload();
    },1000);
}

//每个.catch(error)后都调用并传参
export function throwError(error) {
    ElementUI.Message({
        showClose: true,
        message: '服务器出了点小差',
        type: 'error'
    });
    console.log(error)
}

/**
 * 测试
 * @param Test
 * {
 * }
 * @return
 */
// export function Test() {
//     return request({
//         url: '/toRegister',
//         method: 'get',
//     })
// }

/**
 * 客户注册
 * @param toRegister
 * {
 *      username
 *      password
 *      email
 * }
 * @return
 */
// export function toRegister(args) {
//     console.log("请求参数")
//     console.log(args)
//     return request({
//         url: '/customerRegister',
//         method: 'post',
//         data:args
//     })
// }

第一次写文章，就当是记笔记了，如有错误或不足清各路大神指点。

ps:cli3的写法在cli4上方的注释中。本文仅解决报错，对Message{type：“error”}没有进行测试