自定义Vue组件库安装后无法解析Vuetify组件求助

1. 配置Peer依赖 #

在组件库的package.json中添加Vue和Vuetify作为peer依赖，确保安装包时复用项目已有的依赖，避免重复打包：

"peerDependencies": {
  "vue": "^3.0.0",
  "vuetify": "^3.0.0"
}

2. 正确注册Vuetify组件 #

有两种方式处理组件注册：

• 组件内按需引入（推荐，减少体积）：在使用Vuetify组件的.vue文件中直接引入对应组件

<script setup>
import { VAutocomplete } from 'vuetify/components'
</script>

<template>
  <VAutocomplete ... />
</template>

• 全局注册（组件库入口）：如果组件库需要全局导出，在入口文件中注册Vuetify组件

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import EmployeeAutocomplete from './components/EmployeeAutocomplete.vue'

const vuetify = createVuetify({
  components,
  directives,
})

export { EmployeeAutocomplete, vuetify }

3. 调整Vite构建配置 #

在组件库的vite.config.js中配置external，避免打包Vue和Vuetify：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'VueCommonComponents',
      fileName: (format) => `vue-common-components.${format}.js`
    },
    rollupOptions: {
      external: ['vue', 'vuetify'],
      output: {
        globals: {
          vue: 'Vue',
          vuetify: 'Vuetify'
        }
      }
    }
  }
})

4. 本地模拟安装验证 #

发布前用npm install ../组件库本地路径替代npm link，模拟真实安装场景，确认问题是否修复。

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