迁移至Nx Monorepo后unplugin-vue-components致Vite卡死问题求助

问题背景 #

把单体Vue3项目迁移至Nx Monorepo，原本通过unplugin-vue-components自动导入src/components下的组件。后续将src/components/pr/*下的组件移至libs/pr-components/src/components，在main应用的vite.config.ts中添加该库路径到dirs配置后，Vite启动直接卡死，无法响应资源请求。确认插件能定位到新路径下的组件，但处理过程出现异常。

迁移前的vite.config.ts配置：

// vite.config.ts 

import Components from 'unplugin-vue-components/vite' 
// ... 

export default defineConfig(({ mode }) => { 
  // .... 
  const config = { 
    plugins: [ 
      //... 
      Components({ 
        extensions: ['vue', 'md'], 
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/], 
        dts: 'src/components.d.ts', 
      }), 
    ] 
  } 

  return config 
}) 

迁移后main应用的vite.config.ts配置：

// main's vite.config.ts 

import Components from 'unplugin-vue-components/vite' 
// ... 
export default defineConfig(({ mode }) => { 
  // .... 
  const config = { 
    plugins: [ 
      //... 
      Components({ 
        extensions: ['vue', 'md'],
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/], 
        dts: 'src/components.d.ts', 
        dirs: [ 
          path.resolve(__dirname, 'src/components'), 
          path.resolve(__dirname, '../../libs/pr-components/src/components'), 
        ] 
      }), 
    ] 
  } 
  return config 
}) 

可行解决思路 #

1. 限制插件扫描深度 #

默认情况下unplugin-vue-components会递归扫描整个目录，Nx的lib目录通常包含大量测试文件、配置文件等非组件内容，容易导致插件扫描时资源耗尽甚至死循环。可以通过deep参数限制扫描层数：

Components({
  // 其他配置保持不变
  dirs: [
    path.resolve(__dirname, 'src/components'),
    path.resolve(__dirname, '../../libs/pr-components/src/components'),
  ],
  // 根据组件目录结构调整深度，比如仅扫描1层
  deep: 1
})

2. 排除非组件文件/目录 #

使用exclude参数过滤lib中不需要扫描的内容，比如测试文件、Storybook相关文件：

Components({
  // 其他配置保持不变
  exclude: [/\.stories\.(vue|md)$/, /\.test\.(vue|ts)$/, /__tests__/, /__stories__/],
})

3. 用Nx路径别名替代绝对路径 #

先在tsconfig.base.json中配置路径别名：

{
  "compilerOptions": {
    "paths": {
      "@your-org/pr-components/*": ["libs/pr-components/src/*"]
    }
  }
}

再在vite.config.ts中配置别名解析，并使用别名指定组件目录：

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

export default defineConfig({
  resolve: {
    alias: {
      '@your-org/pr-components': resolve(__dirname, '../../libs/pr-components/src'),
    },
  },
  plugins: [
    vue(),
    Components({
      dirs: [
        'src/components',
        '@your-org/pr-components/src/components',
      ],
      // 其他配置保持不变
    }),
  ],
});

4. 检查lib组件的导出方式 #

确保pr-components库的组件正确导出，比如在libs/pr-components/src/index.ts中统一导出组件：

export { default as PrButton } from './components/PrButton.vue';
export { default as PrCard } from './components/PrCard.vue';

这样插件扫描时能更准确识别组件，避免解析异常。

5. 升级插件版本 #

旧版本的unplugin-vue-components对Monorepo场景的支持可能存在bug，尝试升级到最新版本：

npm update unplugin-vue-components
# 或使用yarn
yarn upgrade unplugin-vue-components

验证方法 #

1. 启动时添加--debug参数，查看插件扫描日志定位问题：

nx serve main --debug

2. 检查生成的src/components.d.ts文件，确认跨库组件是否被正确声明。
3. 临时注释跨库组件路径，确认Vite能正常启动，排除其他配置问题。

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