Vue/Vite本地导入自定义npm包时无法找到该包，求解决方法

问题场景 #

我尝试创建一个自定义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?

相关文件内容 #

包的dist/index.d.ts内容 #

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';

自定义包的package.json内容 #

{
    "name": "chat-bot-prototype",
    "version": "0.0.1",
    "files": [
        "dist"
    ],
    "main": "./dist/chat-bot-prototype.umd.js",
    "module": "./dist/chat-bot-prototype.mjs",
    "exports": {
        ".": {
            "types": "./dist/index.d.ts",
            "import": "./dist/chat-bot-prototype.mjs",
            "require": "./dist/chat-bot-prototype.umd.js"
        },
        "./style.css": "./dist/style.css",
        "./dist/*": "./dist/*",
        "./package.json": "./package.json"
    },
    "types": "./dist/index.d.ts",
    "scripts": {
        "build": "vite build"
    },
    "dependencies": { ... },
    "devDependencies": { ... }
}

排查与解决方案 #

以下是几个可能的遗漏点及解决办法：

• 确认包已正确构建
  执行自定义包根目录下的npm run build，确保dist目录下生成了chat-bot-prototype.mjs、chat-bot-prototype.umd.js、index.d.ts和style.css这些文件，且文件内容完整无报错。

• 检查本地链接是否生效
  在本地项目根目录执行npm install，确保node_modules中出现chat-bot-prototype的软链接（或直接复制的文件），可进入该目录查看dist是否存在；如果是Windows系统，可改用npm link方式：

  1. 在自定义包根目录执行npm link
  2. 在本地项目根目录执行npm link chat-bot-prototype

• 验证Vite的解析配置
  本地Vue+Vite项目中，检查vite.config.js/ts是否有影响模块解析的配置，比如resolve.alias是否覆盖了正常包解析路径；可尝试添加：

  export default defineConfig({
    resolve: {
      preserveSymlinks: true, // 启用软链接解析，避免Vite跳过软链接模块
    }
  })
  

• 检查exports字段兼容性
  可尝试简化exports配置，先去掉./dist/*等非必要项，只保留主入口和样式入口，测试是否能正常解析。

• 确认源码导出正确性
  检查自定义包的主入口文件（如src/index.js）中是否有export { ChatScreen } from './components/ChatScreen.vue'这类语句，确保构建后的产物包含该导出。

内容的提问来源于stack exchange，提问作者Nats