Nuxt3动态加载JSON正确方法解析

在 Nuxt 3 服务端 API 中，因 ES 模块限制无法用 import() 动态加载变量路径的 JSON 文件，本文详解了安全、可靠且符合生产规范的替代方案：借助 Node.js 原生 fs.promises.readFile 配合白名单校验、绝对路径拼接与精细化错误处理，实现按需动态读取 JSON 数据；同时强调防范路径遍历攻击的关键实践，并指出 assets/ 目录中 JSON 不参与服务端打包的设计本质，为多语言、文章配置等场景提供可落地、易维护、高安全性的解决方案。

在 Nuxt 3 的服务端 API（defineEventHandler）中，无法直接使用 import() 动态导入 JSON 文件（如 import(filePath)），因 ES 模块要求路径为静态字符串；推荐改用 Node.js 原生 fs.readFile 或 fs.promises.readFile 安全读取并解析 JSON。

在 Nuxt 3 的服务端 API（defineEventHandler）中，无法直接使用 import() 动态导入 JSON 文件（如 import(filePath)），因 ES 模块要求路径为静态字符串；推荐改用 Node.js 原生 fs.readFile 或 fs.promises.readFile 安全读取并解析 JSON。

在 Nuxt 3 的服务端 API 中，开发者常希望根据请求参数（如 query）动态加载不同 JSON 文件（例如多语言文案、文章配置或页面数据）。但尝试使用 import() 配合变量路径时会失败：

// ❌ 错误示例：动态路径不被允许
const filePath = `../../assets/json/${path}.json`
await import(filePath, { assert: { type: 'json' } }) // 报错：Module needs an import assertion of type "json"

这是因为 import() 是 ECMAScript 模块语法，仅支持编译期可静态分析的字符串字面量（如 import('../../assets/json/home.json')），不支持运行时拼接或变量引用——即使添加 { assert: { type: 'json' } } 也无法绕过该限制。

✅ 正确方案是利用 Nuxt 服务端运行环境（Node.js）的文件系统能力，通过 fs.promises.readFile 安全读取并解析 JSON：

import { promises as fs } from 'fs'
import { join } from 'path'
import { defineEventHandler, getQuery } from 'h3'

export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const path = String(query.path || '').trim()

  // ✅ 白名单校验：防止路径遍历攻击（关键！）
  const validPaths = new Set([
    'home',
    'article-1', 'article-2', 'article-3',
    'article-4', 'article-5', 'article-6'
  ])
  if (!validPaths.has(path)) {
    throw createError({
      statusCode: 400,
      statusMessage: 'Invalid or missing path parameter'
    })
  }

  try {
    // ✅ 使用绝对路径 + 安全拼接（推荐用 join 避免路径注入）
    const jsonPath = join(process.cwd(), 'assets', 'json', `${path}.json`)
    const fileContent = await fs.readFile(jsonPath, 'utf8')
    const data = JSON.parse(fileContent)

    return data
  } catch (err) {
    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
      throw createError({
        statusCode: 404,
        statusMessage: `JSON file not found: ${path}.json`
      })
    }
    throw createError({
      statusCode: 500,
      statusMessage: 'Failed to load JSON file',
      cause: err
    })
  }
})

? 关键注意事项：

• 安全第一：必须对 path 参数做白名单校验（如 Set 或正则），严禁直接拼接用户输入到文件路径，否则将导致任意文件读取漏洞（如 path=../../../etc/passwd）。
• 路径规范：使用 join(process.cwd(), ...) 构建绝对路径，避免相对路径歧义；process.cwd() 在 Nuxt 服务端始终指向项目根目录。
• 错误处理：显式捕获 ENOENT（文件不存在）等常见错误，并返回语义化 HTTP 状态码。
• 性能提示：JSON 文件较小且不频繁变更时，此方式足够高效；若需高频访问，可考虑启动时预加载至内存缓存（如 useState 或 Map），但需权衡内存与实时性。

⚠️ 补充说明：Nuxt 3 的 assets/ 目录默认不参与服务端构建打包，其内容仅作为静态资源存在，因此 import() 无法在服务端按需解析其中的 JSON —— 这并非 Bug，而是设计使然。若需真正“模块化”管理 JSON 数据，建议将结构化数据移至 server/utils/ 下作为 .ts 模块导出，或使用 useStorage() 结合 unstorage 实现统一数据层。

综上，fs.promises.readFile 是当前最可靠、安全、符合 Nuxt 服务端运行模型的动态 JSON 加载方案。

本篇关于《Nuxt3动态加载JSON正确方法解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！