Vite库模式构建Vue组件产物拆分问题求助

问题1：构建后主文件仅包含导入语句，未打包完整组件代码 #

默认情况下Vite会自动做代码拆分，生成多个chunk文件。要将所有组件代码打包到单个文件中，需在rollup配置里开启inlineDynamicImports：

build: {
  lib: {
    entry: './src/MyComponent.js',
    name: 'my-component',
    fileName: 'my-component',
  },
  outDir: './my-component',
  emptyOutDir: false,
  copyPublicDir: false,
  rollupOptions: {
    output: {
      // 禁用代码拆分，将所有代码内联到主文件
      inlineDynamicImports: true
    }
  }
}

问题2：设置external后外部使用报错"Failed to resolve module specifier 'vue'" #

设置external: ['vue']后，打包产物会保留import 'vue'这类裸模块引用，但浏览器不支持这种引用方式，可根据需求选择以下方案：

方案A：Vue作为外部全局依赖（通过CDN引入） #

将输出格式改为umd或iife，配合globals配置让代码识别全局的Vue变量：

build: {
  lib: {
    entry: './src/MyComponent.js',
    name: 'my-component',
    fileName: 'my-component',
  },
  outDir: './my-component',
  emptyOutDir: false,
  copyPublicDir: false,
  rollupOptions: {
    external: ['vue'],
    output: {
      inlineDynamicImports: true,
      // 指定输出格式为umd，兼容浏览器全局变量和模块系统
      format: 'umd',
      globals: {
        vue: 'Vue'
      }
    }
  }
}

使用时需在HTML中先通过CDN引入Vue：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="./my-component/my-component.js"></script>

方案B：将Vue打包进组件文件 #

如果不需要外部依赖Vue，直接移除external: ['vue']配置，Vite会把Vue的代码一并打包到my-component.js中，使用时无需额外引入Vue：

build: {
  lib: {
    entry: './src/MyComponent.js',
    name: 'my-component',
    fileName: 'my-component',
  },
  outDir: './my-component',
  emptyOutDir: false,
  copyPublicDir: false,
  rollupOptions: {
    output: {
      inlineDynamicImports: true
    }
  }
}

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