vue 更新了vue-cli到最新版本后引发的问题: require和import、vue-loader的问题

 

 

 "vue-loader": "^12.1.0",

 "vue-loader": "^12.1.0",

 "vue-loader": "^12.1.0",

 

结局:vue-loader@13.X 降级到 vue-loader@12.X 即可解决

先来说一下export default 与 require 和 import 的关系
通过export default导出的,如果你使用import xxx from 'xxx' 就可以直接使用,但如果你使用require('xxx'),却需要xxx.default 来使用.
具体看一下这篇文章:http://www.cnblogs.com/CyLee/p/5836069.html
 
 
我们的*.vue 资源,都是用export default {} 来导出的。所以如果你使用require,必须搭配.default(),那为什么这里不需要.default() 就可以直接使用了呢?

https://github.com/ElemeFE/mint-ui/blob/master/packages/indicator/index.js 

 

我也一直正常使用,所以从来没有在意过。但今天忽然更新了vue-cli。发现有问题了。才意识到这个问题,怀疑是vue或者webpack的猫腻。
经过一系列搜索之后,发现是vue-loader的问题。vue-loader@13.X 降级到 vue-loader@12.X 即可解决
 
思考过程应该是这样的:无论是require还是import,都是通过webpack来实现的。而webpack默认只拦截js文件,如果是其他类型的资源,就需要 xxxx-loader来处理,那么我们引入的是.vue文件,理所当然是vue-loader来处理的。
所以问题应该就出在vue-loader 身上。
 
说白了。前的require是当成import使用,而最新的vue-loader严格区分require 和 import。
但事实上,我一直都是严格区分。只是第三方的插件作者没有意识到这个问题。

 

posted @ 2018-01-23 18:12  贝尔塔猫  阅读(930)  评论(0编辑  收藏  举报