如何在Vite构建的Vue3组件库中打包完整Vue且禁用Tree Shaking？

要实现把完整Vue打包进库产物且保留全部功能，你需要调整Vite的构建配置，核心是强制Vite将Vue作为内部依赖打包，同时关闭对Vue的Tree Shaking，并确保引入Vue的完整运行时+编译器版本（适配客户运行时解析模板的需求）。以下是具体配置步骤：

1. 修改Vite配置文件（vite.config.ts） #

在build.lib中不要将vue加入external，同时通过optimizeDeps和build.rollupOptions强制打包完整Vue：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'YourComponentLibrary',
      fileName: (format) => `your-lib.${format}.js`,
      // 不要把vue加入external，让Vite打包它
      // external: ['vue'], // 移除或注释这行
    },
    rollupOptions: {
      output: {
        globals: {
          vue: 'Vue' // 仅针对UMD格式的全局变量映射，不影响打包逻辑
        }
      },
      // 全局关闭Rollup的Tree Shaking，确保所有代码被保留
      treeshake: false,
      resolve: {
        dedupe: ['vue'],
        // 明确引入带编译器的完整Vue版本
        alias: {
          'vue': 'vue/dist/vue.esm-bundler.js'
        }
      }
    },
    // 可选：如果需要压缩代码，后续再配置terser，先关闭minify方便调试
    minify: false,
    sourcemap: true
  },
  optimizeDeps: {
    include: ['vue'],
    // 禁用预构建阶段的Tree Shaking
    treeShake: false
  }
})

2. 关键配置说明 #

• 移除build.lib.external中的vue：核心操作，告诉Vite不要将Vue视为外部依赖，而是打包进产物。
• rollupOptions.treeshake: false：全局关闭Rollup的Tree Shaking，确保Vue的所有特性（包括未被你的库直接使用的部分）都被保留。
• 指定Vue完整入口vue/dist/vue.esm-bundler.js：默认Vite引入的是仅运行时版本，无法解析模板，这个入口包含了模板编译功能，适配客户的使用场景。
• optimizeDeps.treeShake: false：禁用Vite预构建阶段的Tree Shaking，确保预构建的Vue包是完整的。

3. 验证打包结果 #

打包完成后可做以下检查：

• 查看UMD/IIFE格式的产物文件，确认包含完整的Vue代码（包括模板编译器）。
• 直接在HTML中引入你的库的IIFE包，无需额外引入Vue，测试客户的模板代码能否正常运行。

额外注意事项 #

如果需要压缩代码，使用minify: 'terser'并配置Terser保留Vue全部功能：

build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      unused: false // 禁止移除未使用的代码，确保Vue完整
    },
    mangle: false // 可选：避免变量混淆导致的潜在问题
  }
}

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