Element-plus自动引入过程中使用ELMessage等出现网络错误的情况（JS）

一、前提

在vue3中使用element-plus自动引入，即依赖于

unplugin-vue-components

具体的引入如下所示，其中注意的是一定要引入icons-vue

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/less/index.less'
import router from '@/router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { createPinia } from 'pinia'
import '@/api/mock.js'
import api from '@/api/mockData/api'



const app=createApp(App)
const pinia=createPinia()

app.config.globalProperties.$api = api;
app.use(pinia)
//app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(router).mount('#app')

二、出现错误

当我在.vue文件中使用element-plus中的ElMessage和ElMessageBox时进行了import引入，在template中编写了一个按钮，对ElMessage是否能够使用做了一个测试按钮，点击测试按钮后出现报错，报错的内容为uncatch或者no named as “ELMessage”。

三、如何解决

因为我目前只使用ElMessage和ElMessageBox这两个，没有这个东西或者这个东西不能用就是没有引入，所以直接在main.js里面引入就ok，在main.js加上两行代码就可以：

import 'element-plus/theme-chalk/el-message.css'
import 'element-plus/theme-chalk/el-message-box.css'