Vue路由复用组件加载不同Markdown文件的动态导入问题

问题核心原因 #

Vite的动态导入机制要求路径必须包含静态前缀，完全动态的变量路径会导致构建工具无法提前扫描并打包目标文件，运行时就会出现模块加载失败的错误。

方案一：带静态前缀的异步导入 #

1. 修改路由配置 #

将meta中的完整路径改为仅保留文件名，减少动态部分：

// index.ts 路由文件
{
    path: "/my_page_1",
    name: "My Page 1",
    component: () => import("@/pages/markdown.vue"),
    meta: {
      mdFileName: "page_1.md"
    },
},
{
    path: "/my_page_2",
    name: "My Page 2",
    component: () => import("@/pages/markdown.vue"),
    meta: {
      mdFileName: "page_2.md"
    },
}

2. 组件中动态加载 #

固定静态路径前缀，仅动态替换文件名，让Vite能识别需要打包的文件范围：

<!-- markdown.vue 组件文件 -->
<template>
  <component :is="AsyncComp" v-if="AsyncComp" />
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { defineAsyncComponent, ref, onMounted } from 'vue'

const route = useRoute();
const AsyncComp = ref(null);

onMounted(async () => {
  try {
    const mdFile = route.meta.mdFileName as string;
    AsyncComp.value = defineAsyncComponent(() => 
      import(`@/assets/markdown/${mdFile}`)
    );
  } catch (err) {
    console.error("Markdown组件加载失败:", err);
  }
})
</script>

方案二：用import.meta.glob预加载所有Markdown文件 #

适合Markdown文件数量较少的场景，直接在构建时导入所有文件，运行时直接匹配使用：

1. 路由配置（可保留原路径格式） #

// index.ts 路由文件
{
    path: "/my_page_1",
    name: "My Page 1",
    component: () => import("@/pages/markdown.vue"),
    meta: {
      path: "@/assets/markdown/page_1.md"
    },
},
{
    path: "/my_page_2",
    name: "My Page 2",
    component: () => import("@/pages/markdown.vue"),
    meta: {
      path: "@/assets/markdown/page_2.md"
    },
}

2. 组件中匹配加载 #

<!-- markdown.vue 组件文件 -->
<template>
  <component :is="currentMdComp" v-if="currentMdComp" />
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { computed } from 'vue'

const route = useRoute();

// 预加载指定目录下所有Markdown文件，eager: true表示同步导入
const mdComponents = import.meta.glob('@/assets/markdown/*.md', { eager: true });

// 根据路由meta的路径匹配对应的组件
const currentMdComp = computed(() => {
  // 将@/替换为/src/，匹配glob导入的路径格式
  const targetPath = (route.meta.path as string).replace('@/', '/src/');
  return mdComponents[targetPath]?.default || null;
})
</script>

方案对比 #

• 方案一：异步加载，仅打包当前访问的Markdown文件，主包体积小，适合文件数量多的场景。
• 方案二：同步预加载，所有Markdown文件打包进主包，运行时无加载延迟，适合文件数量少的场景。

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