NuxtJs如何获取static文件夹下的所有文件名

核心逻辑：浏览器端没有权限直接读取服务器本地目录结构，必须在项目构建阶段（Node运行环境）提前收集好所有PDF文件的路径，再渲染成对应链接。
static目录下的文件构建后会直接映射到站点根路径，比如static/demo.pdf最终可以通过/demo.pdf直接访问。 #

具体实现 #

Nuxt 2 版本 #

利用webpack内置的require.context能力，在构建时遍历指定目录匹配所有PDF文件，不需要额外引入依赖：

export default {
  async asyncData() {
    // 如果你把PDF直接放在static根目录，把路径改成'~/static'，正则匹配所有.pdf后缀文件
    const pdfContext = require.context('~/static/pdf', false, /\.pdf$/)
    const pdfList = pdfContext.keys().map(fileKey => {
      const fileName = fileKey.replace('./', '')
      return {
        title: fileName.replace('.pdf', ''),
        // 拼接成站点可直接访问的路径
        url: `/pdf/${fileName}`
      }
    })
    return { pdfList }
  }
}

页面模板部分遍历列表生成链接，加上target="_blank"属性即可实现在独立窗口打开：

<template>
  <div class="pdf-container">
    <h3>文档列表</h3>
    <ul>
      <li v-for="item in pdfList" :key="item.url">
        <a :href="item.url" target="_blank" rel="noopener noreferrer">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>

Nuxt 3 版本 #

Nuxt3默认静态资源目录为public，如果沿用旧项目的static目录可自行调整路径，用构建工具原生支持的import.meta.glob收集文件：

<script setup>
// 匹配public/pdf目录下所有PDF文件，eager参数表示构建时直接导入，as: 'url'返回可访问的资源路径
const pdfModules = import.meta.glob('/pdf/*.pdf', { eager: true, as: 'url' })
const pdfList = Object.entries(pdfModules).map(([filePath, accessUrl]) => {
  const fullFileName = filePath.split('/').pop()
  return {
    title: fullFileName.replace('.pdf', ''),
    url: accessUrl
  }
})
</script>

模板部分和Nuxt2写法完全一致，遍历pdfList生成带新窗口打开属性的a标签即可。 #

注意事项

• 新增、删除PDF文件后需要重启本地开发服务或者重新执行构建，文件列表是构建阶段生成的，运行时不会自动扫描目录更新
• 如果PDF存放在多级子目录下，把匹配规则里的*.pdf改成**/*.pdf即可递归遍历所有子目录的PDF文件
• a标签添加rel="noopener noreferrer"是常规安全配置，避免新打开的页面对原页面造成安全影响

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