如何在Nuxt中正确动态导入多个组件并使用

前置准备 #

将所有可被CMS动态调用的组件统一存放在/components/cms/目录下，组件文件名与CMS返回的组件类型标识严格对应，例如CMS返回组件类型为TextBlock，对应文件名为TextBlock.vue。

实现步骤 #

1. 配置通配路由页面 #

• Nuxt2 项目在pages/目录下创建_.vue文件
• Nuxt3 项目在pages/目录下创建[...slug].vue文件
  该页面会匹配所有未被静态路由规则命中的访问路径，作为动态页面的统一入口。

2. 服务端获取页面数据 #

在通配页面的异步数据获取钩子中，将当前访问路径作为参数请求CMS接口，获取对应页面的组件配置列表。
示例（Nuxt3）：

<script setup>
const route = useRoute()
// 请求CMS接口获取页面数据
const { data: pageData } = await useAsyncData(
  `cms-page-${route.fullPath}`,
  () => $fetch('/api/cms/get-page', {
    params: { path: route.fullPath }
  })
)
</script>

3. 动态导入并渲染组件 #

通过Vue的动态组件语法<component :is/>配合异步导入方法，根据返回的组件类型动态加载对应组件，同时绑定CMS返回的组件属性。
完整示例代码：

<template>
  <div class="cms-page">
    <!-- 遍历组件列表渲染 -->
    <component 
      v-for="(comp, index) in pageData.components" 
      :key="index"
      :is="getCmsComponent(comp.type)"
      v-bind="comp.props"
    />
  </div>
</template>
<script setup>
const route = useRoute()
const { data: pageData } = await useAsyncData(
  `cms-page-${route.fullPath}`,
  () => $fetch('/api/cms/get-page', {
    params: { path: route.fullPath }
  })
)
// 动态导入CMS组件的方法
const getCmsComponent = (type) => {
  // 异步导入对应组件，找不到则返回兜底组件
  return defineAsyncComponent(() => 
    import(`~/components/cms/${type}.vue`)
    .catch(() => import('~/components/cms/NotFoundComp.vue'))
  )
}
</script>

注意事项 #

• 要保证CMS返回的组件类型字段和本地组件文件名完全一致，避免大小写、拼写差异导致组件加载失败
• 兜底组件建议添加日志上报逻辑，方便排查异常的组件类型
• 若使用Nuxt2，将defineAsyncComponent替换为Vue2支持的异步导入写法即可，核心逻辑一致

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