vite 4 开发vue3组件库打包配置

Vite 4 是一个快速的构建工具，可以用于开发 Vue 3 组件库。以下是一个基本的打包配置示例：

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/main.js', // 组件库的入口文件
      name: 'MyComponent', // 组件库的名称
      fileName: format => `my-component.${format}.js` // 打包后文件的名称
    },
    rollupOptions: {
      // external 外部依赖的声明
      external: ['vue'],
      output: {
        // globals 全局变量的声明
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
}

上面的配置将会把 Vue 组件库打包成一个 UMD 格式的 JavaScript 文件，可以通过 script 标签引入，也可以通过 import 引入。其中，`lib.entry` 指定了组件库的入口文件，`lib.name` 指定了组件库的名称，`lib.fileName` 指定了打包后文件的名称。

在 `build.rollupOptions` 中，`external` 指定了组件库的外部依赖，这里只有一个 Vue；`globals` 指定了组件库的全局变量声明，这里将 Vue 指定为全局变量。

需要注意的是，如果组件库中使用了一些 Vue 的插件或者第三方库，需要在 `build.rollupOptions.external` 中声明这些依赖。如果不声明会导致打包后的文件中包含这些依赖的代码，从而增加文件体积。

除了上面的基本配置，还可以根据具体项目的需求进行更高级的配置，例如压缩文件体积、生成 source map 等。具体的配置项可以参考 Vite 的文档。