时间戳

首页 > 解决方案 > Vue.component 构造引发错误，直到添加“.default”键

vuejs2 - Vue.component 构造引发错误，直到添加“.default”键

问题描述

在@vue/cli 4 和 vuejs 2.6.10 应用程序中，尝试使用带有命令的组件：

Vue.component('listing-header', require('../../../src/components/ListingHeader.vue'))

我得到控制台错误：

[Vue warn]: Failed to mount component: template or render function not defined.

在网上搜索后，我发现它可以通过以下方式修复：

Vue.component('listing-header', require('../../../src/components/ListingHeader.vue').default)

我想知道这里的“.default”是什么？

标签： vuejs2

解决方案

查看 Webpack 的动态导入文档

我们需要的原因default是，从 webpack 4 开始，在导入 CommonJS 模块时，导入将不再解析为 module.exports 的值，而是会为 CommonJS 模块创建一个人工命名空间对象。

import()promise resolve 是一个包含模块导出作为键的对象。通过使用.default，您正在访问模块的默认导出....

推荐阅读