Vue3组件npm包中如何导出Vuetify别名与默认配置

要让你的Vuetify别名与默认配置在组件被导入其他项目时生效，核心是把配置从组件包中导出，让用户项目的Vuetify实例能合并或加载这些配置。以下是具体实现步骤：

1. 抽离并导出Vuetify配置 #

修改./src/plugins/vuetify.ts，把配置对象单独抽离并导出，而不是仅导出createVuetify的实例：

import { createVuetify, VBtn } from 'vuetify'

// 抽离可复用的Vuetify配置
export const myComponentVuetifyConfig = {
  aliases: {
    MyBtn: VBtn,
  },
  defaults: {
    VTextField: {
      variant: "underlined",
    },
    MyBtn: {
      size: "small",
    },
  },
}

// 原项目仍可使用默认导出的Vuetify实例
export default createVuetify(myComponentVuetifyConfig)

2. 在组件包入口导出配置 #

修改./lib/main.js，将配置和组件一起导出：

import MyComponent from "@/components/MyComponent.vue";
import { myComponentVuetifyConfig } from "../src/plugins/vuetify";

export { MyComponent, myComponentVuetifyConfig };

3. 让用户项目加载配置（两种可选方式） #

方式一：用户手动合并配置 #

用户在自己项目的Vuetify配置文件中，导入你的配置并合并（需注意深层合并默认配置，避免覆盖用户自定义项）：

// 用户项目的src/plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import { myComponentVuetifyConfig } from '你的npm包名称'

export default createVuetify({
  // 合并别名
  aliases: {
    ...myComponentVuetifyConfig.aliases,
    // 用户自定义别名
  },
  // 深层合并默认配置
  defaults: Object.assign({}, myComponentVuetifyConfig.defaults, {
    // 用户自定义默认配置，比如覆盖或扩展组件属性
    VBtn: {
      ...myComponentVuetifyConfig.defaults?.VBtn,
      color: 'primary'
    }
  })
})

方式二：封装为Vuetify插件（更友好） #

如果想让用户无需手动合并，可把配置封装成Vuetify插件：

1. 在组件包中新建src/plugins/my-vuetify-plugin.ts：

import type { VuetifyPlugin } from 'vuetify'
import { myComponentVuetifyConfig } from './vuetify'

export const myComponentVuetifyPlugin: VuetifyPlugin = {
  install(vuetify) {
    // 合并别名
    vuetify.aliases = { ...vuetify.aliases, ...myComponentVuetifyConfig.aliases }
    
    // 深层合并默认配置，避免完全覆盖用户已有配置
    vuetify.defaults = Object.assign({}, vuetify.defaults, {
      ...Object.fromEntries(
        Object.entries(myComponentVuetifyConfig.defaults || {}).map(([key, value]) => [
          key,
          Object.assign({}, vuetify.defaults?.[key], value)
        ])
      )
    })
  }
}

2. 修改./lib/main.js导出插件：

import MyComponent from "@/components/MyComponent.vue";
import { myComponentVuetifyPlugin } from "../src/plugins/my-vuetify-plugin";

export { MyComponent, myComponentVuetifyPlugin };

3. 用户项目中只需在Vuetify实例中注册插件：

// 用户项目的src/plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import { myComponentVuetifyPlugin } from '你的npm包名称'

export default createVuetify({
  plugins: [myComponentVuetifyPlugin],
  // 用户自定义配置
})

4. 调整打包配置 #

确保组件包不打包Vuetify依赖（让用户项目提供Vuetify），修改./vite.config.ts的rollupOptions：

rollupOptions: {
  external: ["vue", "vuetify", "vuetify/components", "vuetify/directives"],
  output: {
    globals: {
      vue: "Vue",
      vuetify: "Vuetify"
    },
  },
},

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