Nuxt Server API动态导入指定文件名JSON文件失败求助

问题 #

在Nuxt Server API中，希望从assets文件夹动态导入指定名称的静态JSON文件，编写了如下代码：

export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const path = query.path as keyof typeof FilePaths

  enum FilePaths {
    "home" = "../../assets/json/home.json",
    "article-1" = "../../assets/json/article-1.json",
    "article-2" = "../../assets/json/article-2.json",
    "article-3" = "../../assets/json/article-3.json",
    "article-4" = "../../assets/json/article-4.json",
    "article-5" = "../../assets/json/article-5.json",
    "article-6" = "../../assets/json/article-6.json",
  }

  const filePath = FilePaths[path]
  const page = await import(filePath, { assert: { type: 'json' } })
})

运行时出现报错：

[nuxt] [request error] [unhandled] [500] Module "file:///D:/folder/assets/json/article-1.json" needs an import assertion of type "json"

使用硬编码路径await import("../../assets/json/article-1.json")可正常运行，但用变量或拼接字符串导入则失败。不想全部导入文件或硬编码路径，已尝试指定可能文件名、添加assert选项，仍未解决，如何实现动态导入？

解决方案 #

核心原因 #

Nuxt基于Vite构建，Vite对动态导入的处理需要明确的静态路径提示：

• 硬编码路径时，Vite能在构建阶段识别文件并自动处理导入断言
• 变量或动态拼接的路径如果无法被Vite静态分析，会导致无法正确处理JSON文件的导入断言，甚至不会将文件纳入构建资源

可行方案 #

方案1：使用import.meta.glob预加载所有目标JSON文件

这是最可靠的方式，import.meta.glob会在构建阶段扫描匹配的文件，确保Vite能正确处理所有目标资源：

export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const pathKey = query.path as string

  // 预加载assets/json目录下的所有JSON文件，eager: true表示启动时立即加载
  const jsonFiles = import.meta.glob('../../assets/json/*.json', { 
    eager: true, 
    assert: { type: 'json' } 
  })

  // 拼接对应文件的路径键
  const targetPath = `../../assets/json/${pathKey}.json`
  const targetFile = jsonFiles[targetPath]

  if (!targetFile) {
    throw createError({ 
      statusCode: 404, 
      statusMessage: '指定的JSON文件不存在' 
    })
  }

  // 返回JSON文件的默认导出内容
  return targetFile.default
})

• 优点：构建阶段明确识别所有目标文件，运行时直接获取，性能稳定
• 注意：pathKey需要和JSON文件名完全匹配（比如传入home对应home.json）

方案2：保留动态导入但确保路径可被Vite静态分析

如果不想预加载，可以使用带固定前缀的动态拼接路径，让Vite能扫描到所有可能的文件：

export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const pathKey = query.path as string

  // 必须保留固定的路径前缀，让Vite能识别到要扫描的文件范围
  const page = await import(`../../assets/json/${pathKey}.json`, { 
    assert: { type: 'json' } 
  })

  return page.default
})

• 注意：Vite会在构建阶段打包所有匹配../../assets/json/*.json的文件，确保运行时能动态加载
• 如果pathKey对应的文件不存在，会抛出404错误，建议添加错误捕获

内容的提问来源于stack exchange，提问作者hlmn-div