Vue 组件注册怎么配置 Rollup 独立打包组件-Vue.js-PHP中文网

vue组件独立打包需rollup配置支持插件式导出：组件实现install方法供app.use()全局注册，rollup通过external排除vue、输出es//umd格式，配合rollup-plugin-vue编译并处理样式。

vue 组件注册怎么配置 rollup 独立打包组件

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 函数：

// src/index.ts
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 }