Vue组件独立打包需Rollup配置支持插件式导出：组件实现install方法供app.use()全局注册，Rollup通过external排除vue、输出es//umd格式，配合rollup-plugin-vue编译并处理样式。
Vue 组件注册本身不依赖 Rollup，但要让组件支持“独立打包 + 外部注册使用”，Rollup 配置必须配合组件的导出方式和安装逻辑来设计。核心是：组件需提供 可被 Vue.use() 全局注册 或 可被 import 后手动注册 的能力，而 Rollup 负责把这种能力正确打包成标准模块（如 ES、UMD），同时排除 Vue 本体。
组件需实现 install 方法（推荐）
这是 Vue 插件的标准写法，让使用者能通过 app.use(MyLib)（Vue 3）或 Vue.use(MyLib)（Vue 2）一键注册所有子组件：
- 在组件文件（如
src/components/Button.vue）中定义name，确保唯一且合法（如MyButton） - 新建
src/index.ts（或.js）统一导出并声明install函数：
import { App } from 'vue'
import MyButton from './components/Button.vue'
import MyInput from './components/Input.vue'
const components = [MyButton, MyInput]
const install = (app: App) => {
components.forEach(comp => app.component(comp.name, comp))
}
export default { install, MyButton, MyInput }
export { MyButton, MyInput }
Rollup 需正确处理 Vue 和导出格式
配置重点不是“打包组件”，而是“打包一个带 install 的插件对象”，并确保 Vue 不被打包进去：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 用
rollup-plugin-vue（Vue 2 用 v5.x，Vue 3 用 v6+）编译.vue文件 - 用
@rollup/plugin-node-resolve和@rollup/plugin-commonjs解析依赖 - 把
'vue'加入external列表，避免重复打包 Vue - 输出至少两个格式：
es（供现代构建工具 tree-shaking）、umd（供 CDN 直接 script 引入）
import vue from 'rollup-plugin-vue'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
export default {
input: 'src/index.ts',
external: ['vue'],
plugins: [vue(), resolve(), commonjs()],
output: [
{ file: 'dist/index.esm.js', format: 'es' },
{ file: 'dist/index.umd.js', format: 'umd', name: 'MyComponentLib', globals: { vue: 'Vue' } }
]
}
发布后如何注册使用
打包产物发布到 npm 后，使用者按需注册：
立即学习“前端免费学习笔记（深入）”；
-
Vue 3 全局注册：
import MyLib from 'my-component-lib'; app.use(MyLib); -
Vue 3 局部注册：
import { MyButton } from 'my-component-lib'; export default { components: { MyButton } }; -
CDN 方式：
<script src="https://unpkg.com/my-component-lib@latest/dist/index.umd.js"></script>，之后全局可用MyComponentLib对象
注意样式是否内联或外链
如果组件含 <style scoped>，rollup-plugin-vue 默认会提取为 JS 内联；若需单独 CSS 文件，加 rollup-plugin-css-only 并配置 extract: true：
- 插件启用：
css({ extract: 'index.css' }) - package.json 中补充
"files": ["dist", "index.css"]，确保 CSS 被发布 - 用户需手动引入 CSS：
import 'my-component-lib/dist/index.css';
