vue3中按需引入element-plus组件报错：Error: Can‘t resolve ‘element-plus/lib/el-button‘ in ‘D:\vue3\vue3-cms\src

118 阅读 0 评论 78 点赞

我是靠谱客的博主清爽大叔，这篇文章主要介绍vue3中按需引入element-plus组件报错：Error: Can‘t resolve ‘element-plus/lib/el-button‘ in ‘D:\vue3\vue3-cms\src，现在分享给大家，希望可以做个参考。

安装element-plus:npm install element-plus
在login.vue文件中按需引入ElButton组件，刚开始按照官网这样写：

复制代码

1
2
3
4
5
6
7
import {ElButton} from 'element-plus'
export default defineComponent({
components: {
    ElButton
  }
})

报错：Module not found: Error: Can’t resolve ‘element-plus/lib/el-button’ in ‘D:vue3vue3-cmssrcviewslogin’

然后去官网查看配置，按需引入需要安装下面两个npm包

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

安装完成之后在vue.config.js中配置如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
  transpileDependencies: true
})