Vue/Vite 在本地导入时找不到我的自定义包

Question

我正在尝试为我的项目创建一个自定义包并通过本地

npm

导入它。

我正在使用

vite-plugin-dts

来制作我的

.d.ts

文件，但是当我导入组件以在 Vue 文件中使用时，我不断得到

[plugin:vite:import-analysis] Failed to resolve import "chat-bot-prototype" from "src/views/agents/AgentDialogues.vue". Does the file exist?

这是我的

index.d.ts

在

chat-bot-prototype/dist

:

import { AllowedComponentProps } from 'vue';
import { ComponentCustomProps } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { VNodeProps } from 'vue';

export declare const ChatScreen: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>;

export { }

我的项目的

package.json

导入看起来像

"chat-bot-prototype": "file:../chat-bot-prototype"

，我的 Vue 文件的导入看起来像

import { ChatScreen } from 'chat-bot-prototype'

。

我在这里缺少什么？

Answer 1

您应该将类型声明为模块：

declare module 'chat-bot-prototype' {
  import {
    AllowedComponentProps,
    ComponentCustomProps,
    // etc...,
    VNodeProps
  } from 'vue'

  export declare const ChatScreen: DefineComponent<...>
}