Vue/Typescript自定义库在IntelliJ中无代码补全问题排查

针对你遇到的自定义组件库在IntelliJ中无法触发组件名称和Props补全的问题，即使类型文件存在，可从以下几个关键配置点排查修复：

1. 完善package.json的exports类型映射 #

当前你的exports配置未明确指定主入口的类型文件路径，IntelliJ可能无法自动关联类型。需要在主入口的exports节点中添加types字段：

"exports": {
  ".": {
    "import": "./dist/ui-components-lib.js",
    "require": "./dist/ui-components-lib.umd.cjs",
    "types": "./dist/types/index.d.ts"
  },
  "./dist/style.css": "./dist/style.css"
}

同时确保根节点的types字段和exports中的类型路径保持一致，避免歧义。

2. 确保TypeScript类型生成的完整性 #

检查tsconfig.json配置 #

确认组件库根目录的tsconfig.json开启了类型声明生成：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./dist/types",
    "emitDeclarationOnly": false,
    // 其他必要配置...
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

用vue-tsc生成标准Vue组件类型 #

Vite默认不会生成Vue单文件组件（.vue）的类型声明，需要借助vue-tsc工具生成正确的组件类型：

• 安装依赖：npm install vue-tsc --save-dev
• 在package.json的scripts中添加类型生成命令：

"scripts": {
  "build": "vite build && vue-tsc --declaration --emitDeclarationOnly"
}

运行npm run build后，dist/types目录下会包含所有.vue组件的类型定义，必须确保每个组件通过defineComponent定义，而非普通对象：

// 组件示例：src/components/MyButton.vue
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    label: {
      type: String,
      required: true
    },
    disabled: Boolean
  },
  // ...组件逻辑
});

3. 修正Vite构建配置的一致性 #

当前vite.config.ts中lib.formats只设置了['es']，但package.json中同时声明了umd格式的入口，建议统一格式或补充完整：

build: {
  target: 'esnext',
  lib: {
    entry: path.resolve(__dirname, 'src/index.ts'),
    name: 'UiComponents',
    fileName: `ui-components-lib`,
    formats: ['es', 'umd'] // 匹配package.json中的入口格式
  },
  rollupOptions: {
    external: ['vue'],
    output: {
      globals: {
        vue: 'Vue',
      },
    },
  },
}

4. 刷新IntelliJ缓存 #

完成上述配置后，执行以下操作确保IntelliJ加载最新配置：

• 打开IntelliJ的File → Invalidate Caches...，选择"Invalidate and Restart"
• 确认项目的tsconfig.json已正确识别（可通过File → Project Structure → Modules查看）

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