Vue3 defineAsyncComponent动态路径生产构建动态导入失败问题

我给defineAsyncComponent扩展加载重试能力时编写了如下辅助函数：

const MAX_TRY = 3;
const WAIT_TIME = 1000;

async function loadAsyncComponent(componentPath: string, tryCount = 1) {
  if (tryCount > MAX_TRY) return Promise.reject();

  return new Promise((resolve, reject) => {
    const path = componentPath.replace('.vue', '').replace('@/modules/', '');
    // 动态导入规则遵循rollup dynamic-import-vars插件限制
    import(`../../../modules/${path}.vue`).then(resolve).catch((error) => {
      console.error('loading async component failed : ', error);
      captureException(error);

      wait(WAIT_TIME).then(() => {
        loadAsyncComponent(componentPath, ++tryCount)
          .then(resolve)
          .catch(reject);
      });
    });
  });
}


export default function customAsyncComponent<T>(componentPath: string): T {
  return defineAsyncComponent({
    // 组件加载函数
    loader: () => loadAsyncComponent(componentPath) as any,

    // 加载中展示的占位组件
    loadingComponent: Loading,
    // 展示加载组件前的延迟时间，默认200ms
    delay: 200,

    // 加载失败展示的错误组件
    errorComponent: AsyncLoadFailed,
    // 加载超时时间，超出则展示错误组件，默认值为Infinity
    timeout: 10000,
  });
}

上述代码在本地DEV开发环境运行正常，但构建部署到生产环境后抛出异常：

Error: Unknown variable dynamic import: ../../../modules/room/components/room/Room.vue

排查发现动态导入的组件没有被包含在最终构建产物中。我尝试过两种rollupOptions配置：

rollupOptions: {
  external: [path.resolve(__dirname, 'src/modules/room/components/room/Room.vue')],
},

rollupOptions: {
  external: ['@/modules/room/components/room/Room.vue')],
},

执行vite build后动态导入的文件依然没有生成到dist目录，该怎么解决？

更新：我找到了基于Vite glob-import特性的临时绕过方案，正在测试验证。

这个问题的核心是Vite生产构建基于Rollup实现，Rollup对动态导入路径有强静态分析要求：

• 开发环境Vite基于浏览器原生ES模块做按需转译，运行时拼接路径可以正常解析；生产构建阶段Rollup必须在打包时就枚举所有可能被动态导入的文件，你代码里import(../../../modules/${path}.vue)的path是经过两次字符串替换生成的运行时变量，Rollup静态扫描时推导不出所有可能匹配的文件，自然不会把对应组件打进产物。
• 你之前加的external配置完全起反作用：这个配置是用来声明对应模块不需要打包、作为外部依赖在运行时从外部加载的，只会让组件更不可能出现在dist目录里。

你提到的glob导入就是官方推荐的正确解法，直接用Vite内置的import.meta.glob能力，在构建阶段提前把目标目录下所有Vue组件扫描成「文件路径: 加载函数」的映射表，从根源绕开动态导入变量的静态分析限制，改造后的可直接运行的代码如下：

const MAX_TRY = 3;
const WAIT_TIME = 1000;
// 构建阶段提前扫描modules下所有vue文件，生成 路径:加载函数 的映射
const modules = import.meta.glob('../../../modules/**/*.vue');

async function loadAsyncComponent(componentPath: string, tryCount = 1) {
  if (tryCount > MAX_TRY) return Promise.reject();

  // 把传入的路径统一转换为和glob匹配的key格式
  const normalizedPath = componentPath.startsWith('@/modules/') 
    ? `../../../${componentPath.replace('@/', '')}`
    : componentPath.endsWith('.vue') ? componentPath : `${componentPath}.vue`;
  
  const loader = modules[normalizedPath];
  if (!loader) return Promise.reject(new Error(`Component ${componentPath} not found`));

  return new Promise((resolve, reject) => {
    loader().then(resolve).catch((error) => {
      console.error('loading async component failed : ', error);
      captureException(error);

      wait(WAIT_TIME).then(() => {
        loadAsyncComponent(componentPath, ++tryCount)
          .then(resolve)
          .catch(reject);
      });
    });
  });
}


export default function customAsyncComponent<T>(componentPath: string): T {
  return defineAsyncComponent({
    loader: () => loadAsyncComponent(componentPath) as any,
    loadingComponent: Loading,
    delay: 200,
    errorComponent: AsyncLoadFailed,
    timeout: 10000,
  });
}

实现时注意几个关键点：

• import.meta.glob的路径参数必须是硬编码的字符串字面量，不能传入拼接生成的变量，否则Rollup依然无法完成静态扫描
• 传入的组件路径和glob生成的key要做格式对齐，调试时可以打印Object.keys(modules)查看实际生成的路径格式，调整归一化逻辑即可
• 默认import.meta.glob就是懒加载模式，不会把所有组件提前打包进首屏包，不需要额外加eager: true配置，完全保留原有异步加载的性能优势
• 原有的加载重试、加载态、错误态逻辑完全保留，业务侧的组件调用代码不需要做任何改动

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