构建后无法导入和使用vuejs单文件组件

Posted 2023-02-22

【中文标题】构建后无法导入和使用vuejs单文件组件

【英文标题】：Unable to import and use vuejs single-file-component after build

【发布时间】：2020-09-28 00:58:29

【问题描述】：

我正在尝试在另一个存储库中重用我的一些组件从一个存储库。我的组件是单个文件组件。我设置 webpack 为该组件创建一个 .js 包，然后复制该文件并将其放到另一个存储库的共享目录中。

当我导入该组件并将其注册到创建它的存储库中时，没有问题。问题是当我导入该组件并在我捆绑它（单独）并将它移动到另一个存储库之后将它注册到父组件上。我收到此错误消息。

挂载组件失败：未定义模板或渲染函数。

导出文件

<template>
   // template code
</template>

<script>
export default 
  data() 
    return 
        data: 'data'
    
,
</script>

<style>
</style>

导入文件：

import sharedComponent from '../../components/shared/sharedComponent.vue';

Vue.component('parent-component', 
   components:
    'shared-component': sharedComponent,
   ,
)

【问题讨论】：

错误信息很清楚。您的 parent-component 既没有模板也没有渲染功能。

在我注册子组件之前，父组件已正确呈现。

试试这个解决方案：***.com/a/52495768/13602136，或者用require().default代替import：***.com/a/58326981/13602136

【参考方案1】：

对我有用的解决方案：

由于 webpack 捆绑文件的方式，问题似乎正在发生。通过在 webpack 配置中显式请求 umd 构建来修复：

output: 
    libraryTarget: 'umd'
,