vue cli service构建Vue组件库时仅2个组件被打包，其余20+组件未纳入npm包

问题原因排查及解决方案 #

1. 优先检查src/components目录的导出配置 #

你用import * as components from './components'批量导入组件的前提是，src/components目录下存在index.ts/index.js统一导出文件，且文件内已经把所有20余个组件全部显式导出，这是90%以上同类问题的根因。
示例正确的src/components/index.ts写法：

// 每个组件都要按如下格式显式导出，缺哪个就会在打包时漏掉哪个
export { default as ZButton } from './Button/index.vue'
export { default as ZInput } from './Input/index.vue'
export { default as ZCard } from './Card/index.vue'
// ... 剩余所有组件依次补充完整

你可以在src/index.ts中临时加一行代码验证导出的组件数量：

console.log('当前导出的组件列表：', Object.keys(components))

运行后如果打印出来的组件数量只有2个，直接补全统一导出文件即可。

2. 移除构建命令中的--modern参数 #

--modern是Vue CLI为应用打包准备的参数，用来生成兼容新旧浏览器的两份代码，构建组件库时不需要也不支持该参数，多余参数可能导致打包逻辑异常。修改后的构建命令如下：

vue-cli-service build src/index.ts --target lib --name zwc && rm ./dist/demo.html

3. 检查vue.config.js打包配置 #

确认配置中没有以下错误设置：

• externals字段把部分组件列为了外部依赖，导致打包时被排除
• module.rules中对.vue/.ts文件的include/exclude规则把部分组件的文件排除在编译范围外

4. 验证组件导出规范 #

确保每个单文件组件都是默认导出，符合Vue组件的标准写法，没有用异步导出/匿名导出等非常规写法，导致批量导入时识别失败。

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