Vue使用Element-ui按需引入大坑(正确做法)

4,274 阅读2分钟

前言

Vue结合element-ui相信很多公司都在使用,然而最近,element-ui按需导入小编使用了vue add element的方式,结果重新渲染app.vue入口组件,大大的bug,这是很严重的,比如我之前在app.vue里面配置了很多东西,写了很多函数,如果没有备份一下子就没了。


一、element-ui按需导入

终端输入:

vue add element 

在这里插入图片描述

可以看到让我们选择全部引入还是按需引入,此时我们选择按需引入,Import on demand。

在这里插入图片描述

然后选择zh-CN,这时候我们可以看到此处多了一个plugins的文件夹,里面有一个element.js的文件,并且main.js中多了一个import的内容,并且babel.config.js也是注入了相关内容的。

如下:

在这里插入图片描述

main.js中多了引入:

在这里插入图片描述

babel.config.js多了配置:

在这里插入图片描述

使用方式:

import Vue from 'vue'
import { Message } from 'element-ui'

Vue.use(Message)

使用这种加载方式会导致上述问题,具体原因还不是很清楚,导致每个页面刷新后均自动弹框。

在这里插入图片描述 解决方案:

把引入组建的方式改为:

import Vue from 'vue'
import { Message } from 'element-ui'

Vue.component(Message)

在这里插入图片描述

结果还是报错了:

在这里插入图片描述 原因:

在单独按需引入element组件时,message组件需要挂载到Vue全局对象上,而不是用Vue.use(Message),这是message组件与其他组件不同的地方。其中与之相同、需要挂载到Vue全局对象上的,还有confirm组件。

import Vue from 'vue'
import { Message } from 'element-ui'

Vue.component(Message)
//挂载到Vue全局对象上
Vue.prototype.$message = Message

在这里插入图片描述

二、卸载element-ui 重装

卸载element-ui 重装,启动报错:

$ vue-cli-service inspect --mode production ERROR Error: Duplicate plugin/preset detected. If you'd like to use two separate instances of a plugin, they need separate names, e.g. plugins: [ ['some-plugin', {}], ['some-plugin', {}, 'some unique name'], ]

原因: 在这里插入图片描述

结局方案:如果你已经全部卸载了element-ui,删除掉babel.config.js里面plugins配置即可。

三、正确卸载步骤

  1. 控制台输入vue ui在控制面板的依赖中找到卸载

  2. 删除项目src的plugins文件夹

  3. 删除main.js的element-ui导入

  4. 删除babel.config.js里面plugins关于element-ui的配置

总结

一个按需引入,不容易啊,入了这么多坑,小编之前都是全局引入,资源消耗过大,不过方便,不需要按需加载组件,不过一般公司在使用这些组件的时候都是按需引入的,为了减少项目体积,提高系统性能,还会做其他更多的优化策略。