Vite构建时Vue defineAsyncComponent动态组件路径解析配置问题

问题描述 #

你提供的Vue组件在开发模式下能正常加载动态组件，但构建后无法解析component_with_path对应的组件路径，导致动态组件加载失败。

问题原因 #

代码中使用了/* @vite-ignore */跳过了Vite的静态分析：

loader: () => import( /* @vite-ignore */component),

开发模式下，浏览器可以直接通过相对路径读取文件，但在构建阶段，Vite不会处理被@vite-ignore标记的动态导入，不会将这些动态组件打包到产物中；同时构建后的文件会被重命名为带哈希的文件名，原有的相对路径拼接逻辑完全失效。

解决方案 #

利用Vite提供的import.meta.glob语法预收集所有动态组件，让Vite在构建时能正确识别并打包这些文件，具体修改如下：

1. 替换动态导入逻辑，使用glob预导入
   在<script setup>中添加import.meta.glob来导入./dynamic/目录下的所有.vue文件：

// 预收集dynamic目录下的所有.vue组件，构建时会自动打包这些文件
const dynamicComponentMap = import.meta.glob('./dynamic/*.vue')

2. 修改loadComponent函数
   不再通过拼接路径动态导入，而是直接从预收集的映射中获取组件的加载函数：

function loadComponent(componentPath) {
  return defineAsyncComponent({
    // 从预定义的映射中获取对应的加载函数
    loader: dynamicComponentMap[componentPath],
    loadingComponent: Loading,
    delay: 2000,
    errorComponent: Missing,
    timeout: 3000
  })
}

3. 移除@vite-ignore注释
   原来的import(/* @vite-ignore */component)可以完全替换掉，不需要再保留这个注释。

修改后的完整<script setup>代码：

import { computed, defineAsyncComponent, ref } from "vue";
import Loading from "@/components/Loading.vue";
import Missing from "@/components/Missing.vue";
import { TwSelect } from "vue3-tailwind-components";

const componentList = [
  { label: "One", value: 'one.vue' },
  { label: "Two", value: 'two.vue' },
  { label: "Three", value: 'three.vue' },
]

const dynamicComponent = ref('')

// 预收集所有动态组件
const dynamicComponentMap = import.meta.glob('./dynamic/*.vue')

function loadComponent(componentPath) {
  return defineAsyncComponent({
    loader: dynamicComponentMap[componentPath],
    loadingComponent: Loading,
    delay: 2000,
    errorComponent: Missing,
    timeout: 3000
  })
}

const is_selected = computed(() => {
  return dynamicComponent.value.length > 0;
})

const component_with_path = computed(() => {
  return './dynamic/' + dynamicComponent.value
})

原理说明 #

import.meta.glob是Vite特有的语法，它会在构建阶段扫描匹配的文件，将这些文件纳入打包范围，同时生成一个以文件路径为键、异步导入函数为值的对象。这样在运行时，我们可以直接通过路径键获取对应的组件加载函数，既保证了构建时的静态分析，又保留了动态加载的灵活性。

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