Vue3+vite 按需自動引入elementUI (按照官方方法配置失敗:Failed to resolve import "element-plus")

按需自動引入elementUI 首先需要插件

unplugin-vue-components 和 unplugin-auto-import

yarn add  unplugin-vue-components unplugin-auto-import

根據elementUI plus 官網說明 快速開始 | Element Plus (gitee.io)

需要在vite.config.js中加入如下代碼

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

按照官網步驟添加引入element組件缺發生報錯:

[vite] Internal server error: Failed to resolve import "element-plus/es/components/button/style/css" from "src\views\home\Index.vue". Does the file exist?

 疑似是最新版本elementUI plus的問題 若以如下方式安裝elementUI

yarn add element-plus

更換elementUI plus 版本為如下即可正常運行

yarn add element-plus@1.0.2-beta.28

 參考:插件unplugin-vue-components - npm (npmjs.com) 注:vite-plugin-components已重命名為unplugin-vue-components