为什么在 Vue 中的 require() 方法之后需要默认值？

Question

vue-cli生成的项目有2个。

其中一个我可以像下面的代码一样添加组件：

Vue.component('HeaderBar',require("./components/common/HeaderBar.vue"));

但另一个我不能这样做，我必须这样编码：

Vue.component('HeaderBar',require("./components/common/HeaderBar.vue").default);

如果没有，我会收到这个错误信息：

Failed to mount component: template or render function not defined

有人能告诉我为什么这样吗？

感谢您的帮助。

Answer 1

使用 ES6 导入时（导出默认 HeaderBar），导出的模块格式为 {"default" : HeaderBar}。 import 语句为您处理此分配，但是，您必须自己进行 require("./mycomponent").default 转换。 HMR 接口代码不能使用导入，因为它不能内联工作。

如果您想避免这种情况，请使用 module.exports 而不是 export default。