在Vue3 vue-cli4 中配置按需加载Element Plus 及 Invalid options in vue.config.js: “plugins“ is not allowed 错误的处

创建项目的过程我就不详细描述了，直接从element plus 的引入说起

一、按照官网的三种方式引入 element

 

二、安装所需插件

npm install -D unplugin-vue-components unplugin-auto-import

三、创建vue.config.js文件

按照官网方式写入如下代码

 

const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
			AutoImport({
			  resolvers: [ElementPlusResolver()],
			}),
			Components({
			  resolvers: [ElementPlusResolver()],
			}),
		  ],
}

此时在启动的时候报错 

四、解决

添加 configureWebpack其他配置 

代码如下

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
	configureWebpack:{
		plugins: [
			AutoImport({
			  resolvers: [ElementPlusResolver()],
			}),
			Components({
			  resolvers: [ElementPlusResolver()],
			}),
		  ],
	}
	
  }
  

此时yarn serve 代码正常启动

五、解决ElMessage 等组件无样式问题（大意了，没有闪）

在main.ts中引入样式文件，完美解决

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
createApp(App).mount('#app')