如何在Nuxt中加载指定目录下的所有Vue SFC？

Nuxt 3 实现方案 #

在Nuxt3中可借助Vite原生的import.meta.glob实现批量导入，同时兼容客户端与服务端环境。

立即加载组件（适用于组件数量少的场景） #

<template>
  <component 
    :is="component" 
    v-for="(component, key) in components" 
    :key="key" 
  />
</template>

<script setup>
// 批量导入monitors目录下所有.vue组件，{ eager: true } 表示立即加载
const componentsMap = import.meta.glob('../monitors/*.vue', { eager: true })
// 提取组件对象，转换为数组供模板遍历
const components = Object.values(componentsMap).map(item => item.default)
</script>

懒加载组件（优化首屏性能） #

如果目录下组件较多，推荐用懒加载：

<template>
  <component 
    :is="component" 
    v-for="(component, key) in components" 
    :key="key" 
  />
</template>

<script setup>
// 批量获取组件的异步导入函数
const componentsMap = import.meta.glob('../monitors/*.vue')
// 执行异步导入，提取组件对象
const components = await Promise.all(
  Object.values(componentsMap).map(fn => fn())
).then(mods => mods.map(mod => mod.default))
</script>

Nuxt 2 实现方案 #

Nuxt2基于Webpack，可使用require.context实现批量导入：

<template>
  <component 
    :is="component" 
    v-for="(component, key) in components" 
    :key="key" 
  />
</template>

<script>
export default {
  data() {
    return {
      components: []
    }
  },
  created() {
    // 创建上下文，匹配指定目录的.vue文件
    const requireComponent = require.context(
      '@/monitors', // 组件目录相对路径，@对应项目根目录
      false, // 是否遍历子目录
      /\.vue$/ // 匹配.vue文件的正则
    )

    // 遍历上下文收集组件
    this.components = requireComponent.keys().map(fileName => {
      const componentConfig = requireComponent(fileName)
      // 优先取export default导出的组件
      return componentConfig.default || componentConfig
    })
  }
}
</script>

原代码的核心问题 #

• 环境不兼容：Node.js的fs模块无法在浏览器客户端运行，不能用readdirSync读取目录。
• 动态组件绑定错误：:is需要绑定实际的Vue组件对象，而非文件名。
• 模板语法错误：v-for缺少等号，<template>标签未正确闭合。

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