Vite+TypeScript构建Vue组件库时合并自定义与生成类型的方案问询

• 技术栈：Vite + TypeScript + Vue，开发跨项目共享的UI组件库、TS类型定义及JS工具库
• 当前问题：构建后自定义类型文件被生成在dist/types/types嵌套目录中，结构不符合预期
• 已尝试：查阅Vite文档未找到对应方案；未深入Rollup配置；暂不愿用bash脚本迁移文件（上移目录、合并index.d.ts）

构建命令 #

vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types && cp ./dist-package.json ./dist/package.json

vite.config.ts #

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
    plugins: [ 
        vue()
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src"),
            "%": path.resolve(__dirname, "./src/assets/css")
        },
    },
    build: {
        lib: {
            entry: path.resolve(__dirname, 'src/index.ts'),
            name: 'MotiveCommmon',
            fileName: (format) => `motive-common.${format}.js`,
        },
        rollupOptions: {
            external: ['vue'],
            output: {
                globals: {
                    vue: 'Vue',
                }
            }
        }
    }
});

tsconfig.json #

{
    "moduleResolution": "node",
    "extends": "@vue/tsconfig/tsconfig.json",
    "compilerOptions": {
        "composite": true,
        "types": [],
        "paths": {
            "@/*": ["./src/*"],
            "%/*": ["./src/assets/css/*"],
        },
        "outDir": "dist",
    },
    "include": [
        "stories/**/*",
        "src/**/*"
    ],
    "exclude": [
        "dist/**/*"
    ],
    "outDir": "dist",
    "declaration": true
}

1. 修正TypeScript配置，指定类型输出目录 #

问题根源是vue-tsc默认按源码目录结构输出到outDir下，导致嵌套。通过declarationDir直接指定类型输出路径：

修改tsconfig.json：

{
    "moduleResolution": "node",
    "extends": "@vue/tsconfig/tsconfig.json",
    "compilerOptions": {
        "composite": true,
        "types": [],
        "paths": {
            "@/*": ["./src/*"],
            "%/*": ["./src/assets/css/*"],
        },
        "outDir": "dist",
        "declaration": true,
        // 新增：指定类型声明文件输出目录
        "declarationDir": "./dist/types"
    },
    "include": [
        "src/**/*"
        // 可选：如果stories不需要生成类型，可移除
    ],
    "exclude": [
        "dist/**/*"
    ]
}

• 移除外层重复的outDir和declaration字段，保持配置统一
• declarationDir直接将类型文件输出到dist/types，避免嵌套
• 可选：移除stories/**/*的include，减少不必要的类型生成

2. 简化构建命令 #

由于vue-tsc现在直接输出类型到dist/types，无需再移动目录：

vite build && vue-tsc --emitDeclarationOnly && cp ./dist-package.json ./dist/package.json

3. 确保类型合并（可选） #

如果需要将所有类型合并到根目录的index.d.ts，只需在src/index.ts中导出所有组件、工具函数及类型：

// src/index.ts
// 导出UI组件
export { default as Button } from './components/Button.vue';
// 导出工具函数
export { formatDate } from './utils/date';
// 导出自定义类型
export type { UserInfo } from './types/user';

vue-tsc会自动生成包含所有导出项的dist/types/index.d.ts，无需手动合并。

4. 优化嵌套结构（可选） #

如果仍想去掉types/types的嵌套，只需调整源码中自定义类型的存放路径（比如将src/types改为src/typings），或在tsconfig的include中更精准控制类型文件范围。

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