在 Vuejs 项目中找不到导出的组件答案

【问题标题】：Cannot find exported component in Vuejs project在 Vuejs 项目中找不到导出的组件
【发布时间】：2021-03-03 13:52:21
【问题描述】：

我目前在从我的组件库包中导出自定义 Vue 组件时遇到问题。

假设ComponentLib 具有以下文件夹结构，其中我要导出的自定义组件称为icon.vue

|-src
  |-components
    |-icon.vue
  |-index.ts
  |-package.json...and other config files

ComponetLib/src/components/icon.vue

<template functional>
    ...
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import { IconModel } from '../index';

    @Component({})
    export default class IconComponent extends Vue {
        @Prop()
        icon!: IconModel;
    }
</script>

ComponentLib/src/index.ts

export type IconModel = {
    id: string;
    content: string;
}

export { default as Icon } from 'components/icon.vue';

构建后，在这个dist 文件夹中，我可以看到以下类型正在导出。

|-dist
  |-...
  |-types
    |-components
      |-icon.vue.d.ts
    |-index.d.ts
    |-package.json

dist/types/index.d.ts

export declare type IconModel = {
    id: string;
    content: string;
};
export { default as Icon } from 'components/icon.vue';

这是MainProject的结构

|-src
  |-components
    |-profile.vue --> imports @ComponentLib/components/icon.vue
  |-index.ts
  |-package.json...and other config files

profile.vue 导入自定义 icon.vue 组件通过

import Icon from '@ComponentLib/types/components/icon.vue';

但是当我编译时，我得到一个错误说module not found，它无法解析这个引用。

但是当我将相同的组件放在MainProject/src/components 文件夹中时，编译器似乎很高兴。我突然想到出口可能有问题。但我不确定我错过了哪一部分或做错了。

【问题讨论】：

标签： typescript vue.js vuejs2 vue-component module-export

【解决方案1】：

显然我导入 Icon 组件的方式不正确，应该是这样的

import { Icon, IconModel } from '@ComponentLib/components';

然后将Icon组件添加到@Component({components: {Icon }})装饰器中。

【讨论】：