[JavaScript知识库] vue3+vite 按需自动引入element plus报错(按照官方方法配置失败:Failed to resolve import “element-plus“)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue3+vite 按需自动引入element plus报错(按照官方方法配置失败:Failed to resolve import “element-plus“) -> 正文阅读

[JavaScript知识库]vue3+vite 按需自动引入element plus报错(按照官方方法配置失败:Failed to resolve import “element-plus“)

参考文章：https://www.cnblogs.com/cokolxvd/p/15661086.html

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

unplugin-vue-components 和 unplugin-auto-import

npm i  unplugin-vue-components unplugin-auto-import

根据elementUI plus 官网说明快速开始.

需要在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