Vue3+Element-plus项目自动导入报错的解决方案

新项目上了vue3,在按需自动导入element-plus组件以后npm run serve启动报错。

首先来看下官网的写法,

先要安装这两个插件,

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

然后在vue.config.js中配置插件

plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],

 到此为止都没有什么问题,但是当项目启动的时候就会报错。

解决方案:降低unplugin-auto-import 插件版本

npm install -D unplugin-auto-import@0.7.2

0.7.2版本是相对稳定的,但是到这里还不行,我们需要配置vue.config.js中的插件参数。

AutoImport({
        resolvers: [
          ElementPlusResolver({
            exclude: new RegExp(/^(?!.*loading-directive).*$/), //修改此处
          }),
        ],
      }),

如果不配置这个参数v-loading会报错,无法找到样式 element-plus/es/components/loading-directive/sty。

之后会生成两个文件,

到此为止就全部解决了,也是各种百度冥思苦想才解决了这个问题。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值