Vue3+TypeScript 组件库 Vite 打包配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

// vite.config.mts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

{
  build: {
    lib: {
      entry: string | string[] | { [name: string]: string },
      name?: string,
      formats?: ('es' | 'cjs' | 'umd' | 'iife')[],
      fileName?: string | ((format, entryName) => string),
      cssFileName?: string
    }
  }
}

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyComponentLib',
      formats: ['es', 'umd'],
      fileName: (format) => `my-lib.${format}.js`
    }
  }
})

{
  build: {
    rollupOptions: {
      external?: string | RegExp | (string | RegExp)[],
      output?: {
        globals?: { [name: string]: string }
      }
    }
  }
}

export default defineConfig({
  build: {
    rollupOptions: {
      // 字符串数组
      external: ['vue', 'vue-router', 'pinia'],

      // 正则表达式
      external: /^vue/,  // 匹配 vue、vue-router 等

      // 混合使用
      external: ['lodash-es', /^@vue/, /^element-plus/],

      output: {
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter'
        }
      }
    }
  }
})

// 不外部化 - 打包体积大
// dist/my-lib.es.js 包含 Vue 源码（约500KB）

// 外部化 - 打包体积小
// dist/my-lib.es.js 只有组件代码（约50KB）
{
  rollupOptions: {
    external: ['vue']
  }
}

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

export default defineConfig({
  plugins: [
    vue({
      // 模板编译选项
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('my-')
        }
      },

      // 脚本设置
      script: {
        defineModel: true,
        propsDestructure: true
      }
    })
  ]
})

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'unplugin-dts/vite'

export default defineConfig({
  plugins: [
    vue(),
    dts({
      outDirs: 'dist/types',
      entryRoot: 'src',
      include: ['src/**/*.ts', 'src/**/*.vue'],
      cleanVueFileName: true,
      insertTypesEntry: true
    })
  ]
})

// moduleResolution: "node"
import { foo } from 'package'  // 查找 node_modules/package/index.js

// moduleResolution: "bundler"
import { foo } from 'package'  // 支持 package.json exports 字段

// 使用前
import Button from '../../../components/Button.vue'

// 使用后
import Button from '@/components/Button.vue'
// 或
import Button from '@components/Button.vue'

// 错误：Cannot find module '@/components/Button' or its corresponding type declarations
import Button from '@/components/Button.vue'

// vite.config.ts - 同步配置别名
import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

// 错误：Cannot find module './App.vue' or its corresponding type declarations
import App from './App.vue'

// src/env.d.ts - 添加 Vue 模块声明
/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

// 错误：Cannot use JSX unless the '--jsx' flag is provided
const element = <div>Hello</div>

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import dts from 'unplugin-dts/vite'

export default defineConfig({
  plugins: [
    vue(),
    dts({
      outDirs: 'dist/types',          // 注意：官方接口使用 outDirs（复数）
      entryRoot: 'src',
      include: ['src/**/*.ts', 'src/**/*.vue'],
      cleanVueFileName: true,
      copyDtsFiles: false             // 不复制源码中的 .d.ts
    })
  ],

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },

  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyComponentLib',
      formats: ['es', 'umd'],
      fileName: (format) => `my-lib.${format}.js`,
      cssFileName: 'index'            // CSS 文件名（不含扩展名）
    },

    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        },
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'index.css') return 'index.css'
          return assetInfo.name || 'assets/[name][extname]'
        },
        exports: 'named'                // 使用命名导出
      }
    },

    cssCodeSplit: false,
    sourcemap: true,
    outDir: 'dist'
  }
})

export default defineConfig({
  build: {
    lib: {
      entry: {
        'index': resolve(__dirname, 'src/index.ts'),
        'utils': resolve(__dirname, 'src/utils/index.ts'),
        'components': resolve(__dirname, 'src/components/index.ts')
      },
      formats: ['es', 'cjs']
    },
    rollupOptions: {
      external: ['vue', /^@vue\//]
    }
  }
})

export default defineConfig({
  build: {
    rollupOptions: {
      external: [
        // 框架和核心库（必须外部化）
        'vue',
        'vue-router',
        'pinia',

        // Vue 生态插件
        /^@vue\//,

        // UI 框架（如果使用）
        'element-plus',
        /^element-plus/
      ]
    }
  }
})

export default defineConfig({
  build: {
    cssCodeSplit: false,  // 将所有 CSS 合并到一个文件
    lib: {
      cssFileName: 'index'  // 自定义 CSS 文件名
    },
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'index.css') return 'index.css'
          return assetInfo.name || 'assets/[name][extname]'
        }
      }
    }
  }
})

// 导入组件
import { MyButton } from 'my-component-lib'

// 导入样式
import 'my-component-lib/style.css'

// ✅ 推荐：命名导出，支持 Tree Shaking
export { default as MyButton } from './components/MyButton.vue'
export { default as MyInput } from './components/MyInput.vue'

// ❌ 避免：默认导出整个对象
// export default {
//   MyButton,
//   MyInput
// }

// 只会打包 MyButton，MyInput 会被 Tree Shaking 移除
import { MyButton } from 'my-component-lib'

// ❌ 错误：使用了错误的属性名
dts({
  outputDir: 'dist/types'  // 错误！应该是 outDirs
})

// ✅ 正确：outDirs（根据官方 CreateRuntimeOptions 接口）
dts({
  outDirs: 'dist/types'
})

// ❌ 错误：未外部化 vue
export default defineConfig({
  build: {
    lib: { /* ... */ }
    // 缺少 rollupOptions.external
  }
})

// ✅ 正确：外部化 vue
export default defineConfig({
  build: {
    lib: { /* ... */ },
    rollupOptions: {
      external: ['vue']
    }
  }
})

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import dts from 'unplugin-dts/vite'

export default defineConfig({
  plugins: [
    vue(),
    dts({
      outDirs: 'dist/types',
      entryRoot: 'src',
      include: ['src/**/*.ts', 'src/**/*.vue'],
      cleanVueFileName: true,
      copyDtsFiles: false
    })
  ],

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },

  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyComponentLib',
      formats: ['es', 'umd'],
      fileName: (format) => `my-lib.${format}.js`,
      cssFileName: 'index'
    },

    rollupOptions: {
      external: ['vue', 'element-plus'],
      output: {
        globals: {
          vue: 'Vue',
          'element-plus': 'ElementPlus'
        },
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'index.css') return 'index.css'
          return assetInfo.name || 'assets/[name][extname]'
        },
        exports: 'named'
      }
    },

    cssCodeSplit: false,
    sourcemap: true,
    outDir: 'dist'
  }
})

// src/index.ts
export * from "./button"
export * from "./input"