在 Vuejs 項目中找不到導出的組件

Question

我目前在從我的組件庫包中導出自定義 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文件夾中時，編譯器似乎很高興。 我突然想到導出可能有問題。 但我不確定我錯過或做錯了哪一部分。

Answer 1

顯然我導入 Icon 組件的方式不正確，它應該是這樣的

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

然后將 Icon 組件添加到@Component({components: {Icon }})裝飾器。