为什么需要在 Vue 中的 require() 方法之后使用默认值? [英] Why need default after require() method in Vue?

问题描述

vue-cli 生成了 2 个项目.

There are 2 projects generated by vue-cli.

其中一个我可以添加如下代码的组件:

one of it I could add component like this code below:

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

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

But another one I can't do this , I must code like this:

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

如果没有，我将收到此错误消息:

if not, I will get this error message:

Failed to mount component: template or render function not defined

谁能告诉我为什么会这样?

Is anyone could tell me Why like this ？

谢谢你的帮助.

推荐答案

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

When using ES6 imports (export default HeaderBar), the exported module is of the format {"default" : HeaderBar}. The import statement handles this assignment for you, however, you have to do the require("./mycomponent").default conversion yourself. The HMR interface code cannot use import as it doesn't work inline.

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

If you want to avoid that, use module.exports instead of export default.

这篇关于为什么需要在 Vue 中的 require() 方法之后使用默认值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！