如何在NuxtJS 3中便捷列出assets/和public/目录下所有文件？

一、处理public目录 #

public目录下的文件会原封不动打包到静态站点根目录，只能在服务端上下文或构建阶段用Node.js的fs模块读取（客户端无fs权限）：

方案1：通过服务端接口读取 #

在server/api下创建接口文件，动态返回图片列表：

// server/api/public-images.ts
import { readdirSync } from 'fs'
import { join } from 'path'

export default defineEventHandler(() => {
  // 获取public目录的绝对路径
  const publicDir = join(process.cwd(), 'public')
  // 读取public下的images子目录（根据你的实际路径调整）
  const imageFiles = readdirSync(join(publicDir, 'images')).filter(file => 
    /\.(png|jpg|jpeg|gif|webp)$/i.test(file)
  )
  // 返回相对于站点根目录的图片路径
  return imageFiles.map(file => `/images/${file}`)
})

页面中调用接口获取图片数组：

<template>
  <div class="gallery">
    <img v-for="img in publicImages" :key="img" :src="img" alt="Gallery image">
  </div>
</template>

<script setup>
const { data: publicImages } = await useFetch('/api/public-images')
</script>

方案2：静态构建时预读取（适合nuxt generate） #

在nuxt.config.ts中通过Nitro钩子提前读取图片列表，注入到全局配置：

// nuxt.config.ts
import { readdirSync } from 'fs'
import { join } from 'path'

export default defineNuxtConfig({
  hooks: {
    'nitro:config': (nitroConfig) => {
      const publicImagesDir = join(process.cwd(), 'public', 'images')
      const publicImages = readdirSync(publicImagesDir).filter(file => 
        /\.(png|jpg|jpeg|gif|webp)$/i.test(file)
      ).map(f => `/images/${f}`)
      // 将图片数组注入到全局公共配置
      nitroConfig.runtimeConfig.public.publicImages = publicImages
    }
  }
})

页面中直接调用全局配置：

<script setup>
const config = useRuntimeConfig()
const publicImages = config.public.publicImages
</script>

二、处理assets目录 #

assets目录下的文件会被Webpack处理（哈希重命名、压缩优化），无法用fs直接读取，需用Nuxt 3支持的import.meta.glob批量导入：

<template>
  <div class="gallery">
    <img v-for="(img, path) in imageData" :key="path" :src="img.url" :alt="img.name">
  </div>
</template>

<script setup>
// 匹配assets/images下的所有图片文件，eager: true表示直接导入资源
const assetImages = import.meta.glob('~/assets/images/*.{png,jpg,jpeg,gif,webp}', { eager: true })
// 转换为包含文件名和URL的数组
const imageData = Object.entries(assetImages).map(([path, module]) => {
  const fileName = path.split('/').pop()!
  return {
    name: fileName,
    url: module.default
  }
})
</script>

三、常见问题排查 #

• fs.readdirSync失效：要么是路径错误，要么是在客户端代码中调用了fs（客户端无Node.js环境权限），必须限定在服务端或构建阶段使用。
• 环境变量方案不可行：环境变量无法直接存储数组，且静态生成时环境变量是构建时注入的，无法动态读取目录内容，不适合该场景。

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