vue组件注册为什么有时候要在require后面加上default?

Question

手边有两个项目，都是通过vue-cli生成的项目。
其中一个项目可以直接用这样的代码注册组件：

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

其他答案都说了原因。
我说说用webpack打包esm成可直接引入的配置吧。
之前打包export default导出的包都会成为

{
  default: {
    // 内容
  }
}

webpack3多了一个配置

libraryExport: 'default'

会将default中内容打包

{
  \\ 内容
}

Answer 2

webpack 打包时支持 CommonJS、AMD 和 ES6 的模块化系统。

我们通常写 .vue 单文件组件时，在 script 语言块中使用的是 ES6 的语法，使用 export default 进行默认导出。

require 是 CommonJS（和 AMD，想不到吧？）的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件选项。或者使用 ES6 的 import 语句，ES6 的模块化导入导出语法参见 http://es6-features.org/#Valu...，import 时需要给定一个变量名，所有 import 语句必须统一放在模块的开头。

如果 .vue 文件中使用的本来就是 CommonJS 或者 AMD 的模块化系统语法，导出的是 module.exports 对象作为组件选项，那么使用 require 导入时就不需要使用 .default 来获取。

建议学习一下学习 Vue 你需要知道的 webpack 知识。

Answer 3

https://vue-loader.vuejs.org/...

esModule

https://github.com/vuejs/vue-...

Answer 4

正解~~~~~~~

Answer 5

export default只是语法糖而已 它等于export {default:a}。
so，明白了吗，require没法引用默认属性，所以：1.webpack配置 2.老老实实default吧！3.你也可以用module.exports导出，这时发现什么都能用了！

Answer 6

vue和vue-loader版本的问题。 vue-loader 13之前默认不会挂在default上