如何用Vite构建兼具静态站点与组件库特性的Vue 3项目？

完全可以通过Vite的多构建配置实现需求，既避免代码重复，又能生成符合要求的两种产物。以下是具体方案：

1. 调整项目结构 #

在现有TypeScript Vue项目中，新增库专用入口文件，区分应用与库的导出逻辑：

• 保留原src/main.ts作为静态应用入口（负责挂载Vue实例）
• 新建src/lib/index.ts作为组件库入口，专门导出需要对外暴露的组件、工具函数等：

// src/lib/index.ts
import MyButton from '../components/MyButton.vue'
import { formatDate } from '../utils/date'

// 导出需要发布到NPM的内容
export { MyButton, formatDate }

2. 配置双构建目标 #

将Vite配置拆分为两个独立文件，分别对应静态应用和组件库的构建规则，避免单文件配置过于复杂：

静态应用配置文件（vite.app.config.ts） #

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

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist-app', // 静态产物输出目录
    rollupOptions: {
      input: './index.html' // 以HTML为入口构建静态站点
    }
  }
})

组件库配置文件（vite.lib.config.ts） #

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

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist-lib', // 库产物输出目录
    lib: {
      entry: './src/lib/index.ts', // 库入口文件
      name: 'MyVueLib', // 全局变量名（用于UMD格式）
      fileName: (format) => `my-vue-lib.${format}.js` // 输出文件名
    },
    rollupOptions: {
      // 外部化Vue，避免将Vue打包进库（依赖用户环境的Vue）
      external: ['vue'],
      output: {
        // 为UMD格式指定全局变量映射
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

3. 配置构建命令与NPM发布字段 #

修改package.json，添加构建命令，并配置库的发布元信息：

{
  "name": "my-vue-lib",
  "version": "1.0.0",
  "scripts": {
    "build:app": "vite build --config vite.app.config.ts",
    "build:lib": "vite build --config vite.lib.config.ts",
    "build": "npm run build:app && npm run build:lib" // 一键构建两种产物
  },
  // 库发布必需字段
  "main": "./dist-lib/my-vue-lib.umd.js",
  "module": "./dist-lib/my-vue-lib.es.js",
  "types": "./dist-lib/index.d.ts", // 确保TypeScript类型导出
  "files": ["dist-lib"], // 指定发布到NPM的文件
  "peerDependencies": {
    "vue": "^3.0.0" // 声明Vue为对等依赖
  }
}

4. 代码复用与错误规避 #

• 静态应用可以直接复用库入口的组件，比如在src/main.ts中导入src/lib的内容，确保代码完全同步：

// src/main.ts
import { createApp } from 'vue'
import { MyButton } from './lib'
import App from './App.vue'

const app = createApp(App)
app.component('MyButton', MyButton) // 复用库组件
app.mount('#app')

• 你遇到的ambiguous indirect export错误，是因为静态应用的构建未配置导出规则，Rollup不会处理模块导出。通过单独配置库的构建，Vite会按照库模式生成标准的ES/UMD模块，避免导出格式错误。

最终效果 #

• 执行npm run build:app：生成dist-app目录，包含可部署的静态站点
• 执行npm run build:lib：生成dist-lib目录，包含可发布到NPM的组件库
• 执行npm run build：一键生成两种产物，代码完全复用无重复

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