vue.js - 构建后无法导入和使用vuejs单文件组件

Question

我正在尝试在另一个存储库中重用我的一些组件。我的组件是单个文件组件。我设置 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,
   },
})

标签： vue.jswebpack

Answer 1

对我有用的解决方案：

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

output: {
    libraryTarget: 'umd'
},