上一篇文章我介绍了为了开发组件库而用的相关配置文件。这篇文章里，我会介绍在文件夹里并存两套配置的方法。

很明显，开发 Vue 组件库的时候，文件夹里不太可能只有组件本身的代码（当然你就那么做也不是不可以），文件夹里通常还有着一些测试内容，比如 App.vue ，它们和组件一起运行测试。在打包的时候我们只想打包组件，不打包测试内容。除此之外，还有很多的因素，总之我们需要区分测试环境和打包环境。这样我们就需要有两套配置。

测试环境就是平时用Vue做页面的环境了。那么打包环境呢？

分开文件

/vue-window
├── src/                # 🔧 组件源码
│   └── components/
│       └── MyButton.vue
│   └── index.ts        # 👈 组件统一导出
├── dev/                # 🚀 开发预览项目
│   └── App.vue
│   └── main.ts
├── vite.config.ts      # 🏗️ 主打包配置（用于构建 lib）
├── vite.dev.config.ts  # 🌱 开发用的预览配置（可选）
├── package.json

src 文件夹放要打包的代码，dev 文件夹放预览用的代码。

可变的 vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import unocss from 'unocss/vite'
import path from 'path'
import dts from 'vite-plugin-dts'

// https://vite.dev/config/
export default defineConfig(({ command, mode }) => {
  const isLib = command === 'build'

  return {
    plugins: [vue(), dts(), unocss()],
    build: isLib
      ? {
          lib: {
            entry: path.resolve(__dirname, 'src/index.ts'),
            name: 'VueLive2d',
            fileName: 'index',
          },
          rollupOptions: {
            external: ['vue'],
            output: {
              globals: {
                vue: 'Vue',
              },
            },
          },
          cssCodeSplit: true, // 必须保留！
        }
      : undefined,
    publicDir: isLib ? false : 'dev/public',
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
  }
})

注意到，上次我们传入 defineConfig 的配置是一个对象，这次是一个函数。函数的具体接口可以参考 vite 官方文档，在这里我们只需要知道 command 的取值是 build 和 serve 二者之一。我们在这里判断了 command ，之后就可以在一个文件里产生不同的配置。这就是 vite 利用 ts 文件写配置的好处。

两套 `tsconfig.json`