为什么需要在 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 接口代码不能使用 import，因为它不能内联工作。

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