Vue3中使用Vue-Cli引入element ui

问题描述

element-plus提供了vite的按需引入，但并没有说明如何使用cli配置element。
如果按照上述方式引入会出现如下问题：

Invalid options in vue.config.js: “plugins” is not allowed

解决方法

必须安装两个官网的插件：

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

在vue.config.js中配置如下：

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

module.exports = defineConfig({
 .......
  // 配置elementui
  pluginOptions: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
})

因为vue-cli的更新，所以以前的插件配置项变成了

pluginOptions

这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。例如：

module.exports = {
  pluginOptions: {
    foo: {
      // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
    }
  }
}