Vue.component中require函数搭配default的作用是什么？

这得从模块系统的差异说起：

1. Vue单文件组件的导出规则
   我们写的.vue文件，内部的组件选项是通过ES模块的export default来导出的，比如：

   <script>
   export default {
     name: 'HomepageComponent',
     // ... 其他组件选项
   }
   </script>
   

   这种写法属于ES模块的默认导出，对应的导出内容会被标记为模块的default项。

2. require是CommonJS的加载方式
   require()是CommonJS体系里的模块加载函数，当它加载一个用ES模块语法写的文件（比如.vue）时，Webpack这类构建工具会把ES模块转换成CommonJS模块格式——此时整个模块会被包装成一个对象，原来的ES默认导出内容会被放在这个对象的default属性里。

3. 不加.default会出什么问题？
   如果直接写require('./components/HomepageComponent.vue')，你拿到的是这个包装后的模块对象，而不是实际的组件选项。把这个对象传给Vue.component()去注册，Vue无法识别它是一个组件，自然会报错。

所以必须加上.default，才能从模块对象里取出我们真正需要的组件选项，让Vue能正确注册这个组件。

内容的提问来源于stack exchange，提问作者Yash Raj Mishra