vue.js - 为什么在 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 接口(interface)代码不能使用导入，因为它不能内联工作。

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