前言
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配置即可。
三、正确卸载步骤
-
控制台输入vue ui在控制面板的依赖中找到卸载
-
删除项目src的plugins文件夹
-
删除main.js的element-ui导入
-
删除babel.config.js里面plugins关于element-ui的配置
总结
一个按需引入,不容易啊,入了这么多坑,小编之前都是全局引入,资源消耗过大,不过方便,不需要按需加载组件,不过一般公司在使用这些组件的时候都是按需引入的,为了减少项目体积,提高系统性能,还会做其他更多的优化策略。