elementplus的vue.config.js配置

在vue.config.js配置中，可以按需引入element-plus组件，并在plugins选项中配置相关内容。具体配置如下：

plugins: [
require('unplugin-element-plus/webpack')({
libs: [{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name) => {
return `element-plus/theme-chalk/${name}.css`
},
}]
})
]

为了解决使用按需导入后配置文件中的icon:'Edit'失效问题，可以在当前页面或全局的main.js文件中引入"element-plus/es/components/message-box/style/css"。然而这种方法违背了按需引入的初衷。

另一种解决方法是通过调整css和js文件的引入顺序，可以在vue.config.js中添加以下配置：

css: {
extract: {
ignoreOrder: true
}
}

这样可以解决包体积大小的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入](https://blog.csdn.net/qq_34569497/article/details/130411712)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]