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

手边有两个项目,都是通过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

请问这是怎么一回事呢?

回答:

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

{
  default: {
    // 内容
  }
}

webpack3多了一个配置

libraryExport: 'default'

会将default中内容打包

{
  \\ 内容
}

回答:

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 知识

回答:

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

esModule

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

回答:

正解~~~~~~~

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注