vue实现公用组件打包
公用组件打包的基本思路
在Vue项目中实现公用组件打包，通常需要将可复用的组件独立打包成库，便于其他项目引用。核心步骤包括组件开发、配置构建工具、生成发布文件。
配置Vue CLI构建库模式
使用Vue CLI可以快速配置组件库打包。修改vue.config.js文件，设置library相关参数：
module.exports = {
configureWebpack: {
output: {
libraryExport: 'default'
}
},
css: {
extract: false
}
}通过命令行构建时指定目标为库：
vue-cli-service build --target lib --name my-lib ./src/components/index.js组织组件入口文件
创建src/components/index.js作为组件库入口，统一导出所有公用组件：
import Button from './Button.vue'
import Modal from './Modal.vue'
const components = {
Button,
Modal
}
export default components处理样式文件
确保样式文件正确处理。可以选择内联样式或单独打包CSS：
// vue.config.js
css: {
extract: true // 生成单独的CSS文件
}配置package.json
设置正确的package.json字段，确保组件库能被正确识别：
{
"name": "my-vue-components",
"version": "1.0.0",
"main": "dist/my-lib.umd.js",
"files": ["dist"],
"peerDependencies": {
"vue": "^2.6.0 || ^3.0.0"
}
}发布到npm仓库
构建完成后，可发布到npm：
npm login
npm publish按需加载配置
如果需要支持按需加载，可以配置babel插件：
// babel.config.js
module.exports = {
plugins: [
['import', {
libraryName: 'my-vue-components',
customName: name => `my-vue-components/lib/${name}`
}]
]
}多组件独立打包
对于大型组件库，可能需要单独打包每个组件：
// vue.config.js
module.exports = {
chainWebpack: config => {
config.entryPoints.delete('app')
Object.keys(components).forEach(name => {
config.entry(name)
.add(`./src/components/${name}.vue`)
.end()
})
}
}生成类型定义文件
对于TypeScript项目，需要生成类型定义：
// vue.config.js
module.exports = {
pluginOptions: {
dts: {
outputDir: 'types',
include: ['src/components//*']
}
}
}版本管理与更新
遵循语义化版本控制，在重大更新时注意版本号变更：
npm version patch # 修复bug
npm version minor # 新增功能
npm version major # 不兼容变更以上方法涵盖了从组件开发到发布的完整流程，可根据实际项目需求调整配置细节。
