vite+vue3+ts编译vue组件后，编译产物中d.ts文件为空

最新推荐文章于 2025-03-30 16:59:01 发布

zyk_520

最新推荐文章于 2025-03-30 16:59:01 发布

阅读量1.1k

点赞数 5

分类专栏： Vue 文章标签： vue.js javascript 前端 vite dts

本文链接：https://blog.csdn.net/qq_15509267/article/details/143830758

版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

一、前言

使用vue3+vite+ts实现一个UI组件库，为了生成类型文件便于其他项目引用该组件库。根据推荐使用了vite-plugin-dts插件进行ts文件的生成

二、版本

组件	版本
vue	^3.5.12
vite	^5.4.10
vite-plugin-dts	^4.3.0
typescript	~5.6.2

三、问题描述

使用vite+vite-plugin-dts编译的组件库文件中d.ts文件只有一个并且是空的，导致在其他vue项目中无法导入使用

如图：

四、当前配置

1、vitest.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'
// https://vite.dev/config/
export default defineConfig({
  resolve: {},
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'c-ui', //对外暴露的组件名称
      formats: ['cjs', 'es', 'umd'],//cjs (CommonJS): 通常用于 Node.js 环境，使用 require 语句来导入模块。es (ES Module): 这是现代 JavaScript 的模块标准，使用 import 语句来导入模块。
      fileName: (format)=> `c-ui-${format}.js` //umd（require导入方式） es(import导入方式)
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        //针对于umd模式下为外部化依赖提供一个全局的变量
        globals: {
            vue: 'Vue' //对应exter里的vue， 对于UMD模式导入后，可以使用Vue.xxx
        },
      }
    }
  },
  plugins: [
    vue({
      // 包括哪些文件
      include: [/\.vue$/]
    }),
    dts({ 
      insertTypesEntry: true,
      copyDtsFiles: true,
      // 指定需要为哪些文件生成类型定义
      include: ['src/**/*.d.ts', 'src/**/*.vue', 'src/**/*.ts'] }),
      
  ]
})

2、tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

注：由于我们是运行在浏览器中的UI组件，所以只需要关心tsconfig.app.json文件。

3、tsconfig.app.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

五、问题原因

原因：vite-plugin-dts组件默认取的是tsconfig.json配置，但是vite创建的项目中tsconfig.json被拆分成2个文件，所以tsconfig.json中的include配置项未生效。如下图：

六、解决方案

vite-plugin-dts组件支持配置tsconfig文件的路径，如下：

dts({ 
// 重要 重要 重要  配置实际的tsconfig配置文件路径
      tsconfigPath: 'tsconfig.app.json',
      insertTypesEntry: true,
      copyDtsFiles: true,
      // 指定需要为哪些文件生成类型定义
      include: ['src/**/*.d.ts', 'src/**/*.vue', 'src/**/*.ts'] 
    }),