在Monorepo中配置unplugin-vue-components实现带前缀组件自动导入

完全可以通过unplugin-vue-components的自定义解析器功能，针对不同的Monorepo包设置独立的组件前缀和导入规则。以下是在appX的Vite配置中实现该需求的具体步骤：

1. 修改appX的vite.config.ts配置 #

在插件配置中为ui-base和ui-shared分别定义自定义解析器，通过组件名前缀匹配对应包的组件：

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

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 保留当前应用本地组件的自动导入（可根据需求调整目录）
      dirs: ['src/components'],
      // 配置多包的自定义解析规则
      resolvers: [
        // 处理ui-base包：组件名前缀为V，如<VButton>对应ui-base的Button组件
        {
          type: 'component',
          resolve: (name) => {
            if (name.startsWith('V')) {
              const rawComponentName = name.slice(1)
              return {
                importName: rawComponentName,
                // 替换为你实际的ui-base包名（对应packages/ui-base/package.json中的name字段）
                path: '@your-project/ui-base'
              }
            }
          }
        },
        // 处理ui-shared包：组件名前缀为S，如<SModal>对应ui-shared的Modal组件
        {
          type: 'component',
          resolve: (name) => {
            if (name.startsWith('S')) {
              const rawComponentName = name.slice(1)
              return {
                importName: rawComponentName,
                // 替换为你实际的ui-shared包名
                path: '@your-project/ui-shared'
              }
            }
          }
        }
      ],
      // 开启类型声明文件生成，获得IDE自动提示
      dts: true
    })
  ]
})

2. 关键配置说明 #

• 包名匹配：确保@your-project/ui-base和@your-project/ui-shared与对应packages目录下的package.json中的name字段一致，Turborepo会自动处理Monorepo内的包依赖链接。
• 组件命名规则：在appX中使用<VButton>会自动导入ui-base的Button组件，<SModal>自动导入ui-shared的Modal组件，无需手动写import语句。
• 本地组件兼容：dirs字段保留了本地组件目录的自动导入，不会与外部包的组件规则冲突。

3. 额外注意事项 #

• 确保ui-base和ui-shared的组件采用标准导出方式：每个组件单独存放在对应目录（如Button/index.vue），并在包的入口文件（如index.ts）中导出组件（export { Button } from './Button'）。
• 若开启dts: true，首次启动项目会在appX根目录生成components.d.ts，IDE会自动识别组件的类型和属性。

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