Vue component import require def

控制台报错

image.png

router.js

image.png

引用位置

image.png

components 更正前

image.png

components 更正后 default

image.png

require和import混合使用时会出现这种情况

1.针对本文情况
require 是 CommonJS 的模块导入方式，而组件定义时写的 export default 是 ES6 方式，因此require 导入的结果其实是一个含 default 属性的对象，所以 vue 中 component 用这个会报错，

2. 针对router中使用require引入组件 使用components代替component成功解决报错分析如下：
   因为 vue 的命名视图组件注册恰好用的是 components ，而官方也说了“如果 router-view 没有设置名字，那么默认为 default”，所以这两个default 正好对应起来，于是加了s就不会报错了。
   参考：https://www.jianshu.com/p/4d61f71de95a

总结

• 合理的用法应该是 require('xxx.vue').default 或是用 import。

参考：https://weiku.co/blog/41.html