Vue3自定义组件构建为库时如何全局注册组件？

步骤1：编写全局注册插件 #

在类库项目中创建src/plugin.ts文件，实现Vue插件的install方法，批量全局注册所有自定义组件：

import type { App } from 'vue'
// 导入所有需要全局注册的组件
import AuthButton from './components/AuthButton.vue'
import AuthInput from './components/AuthInput.vue'

// 维护组件列表
const components = [
  AuthButton,
  AuthInput
]

// 定义插件对象
const ComponentLibrary = {
  install(app: App) {
    // 遍历注册每个组件
    components.forEach(component => {
      app.component(component.name, component)
    })
  }
}

export default ComponentLibrary

步骤2：调整入口文件 #

修改src/index.ts，同时导出插件和单个组件，兼顾全局引入和按需引入场景：

import ComponentLibrary from './plugin'
import AuthButton from './components/AuthButton.vue'
import AuthInput from './components/AuthInput.vue'

// 导出插件供全局引入
export { ComponentLibrary }
// 导出单个组件供按需引入
export { AuthButton, AuthInput }

// 默认导出插件，兼容不同引入习惯
export default ComponentLibrary

步骤3：修改Vite构建配置 #

更新vite.config.ts的入口指向，确保所有组件代码被打包进产物：

import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    }),
    vueJsx()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    lib: {
      // 入口改为调整后的index.ts
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'auth-service',
      fileName: 'auth-service'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

步骤4：验证使用方式 #

构建类库后，用户可按你原示例全局引入，所有注册组件直接在项目中使用：

import { createApp } from 'vue'
import App from './App.vue'
import { ComponentLibrary } from '@frontend-ui/vue-ui/dist/plugin'

createApp(App).use(ComponentLibrary).mount('#app')

此时<auth-button>、<auth-input>等组件无需单独导入，可直接在模板中使用。

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