Nuxt 3如何将含JSON文件的data文件夹纳入构建以支持fs读取？

方法一：通过Nitro的publicAssets配置纳入构建 #

在项目根目录的nuxt.config.ts中添加Nitro配置，指定要包含的data文件夹：

export default defineNuxtConfig({
  nitro: {
    publicAssets: [
      {
        dir: './data', // 你的data文件夹路径
        baseURL: '/data', // 服务器端访问的基础路径，可自定义
        fallback: false // 设置为false可避免文件夹暴露给前端，仅服务器端可用
      }
    ]
  }
})

构建时Nitro会自动把data文件夹复制到生产环境输出目录，服务器端通过fs读取时就能找到对应文件。

方法二：将data文件夹移至server/assets目录 #

Nuxt3会自动将server/assets目录纳入构建流程，你可以把data文件夹移动到server/assets/下，然后在API路由中通过serverDir获取正确路径：

// server/api/[fileName].ts
import { serverDir } from 'nitro/utils'
import fs from 'fs/promises'
import path from 'path'

export default defineEventHandler(async (event) => {
  const fileName = getRouterParam(event, 'fileName')
  const filePath = path.join(serverDir, 'assets', 'data', `${fileName}.json`)
  const rawData = await fs.readFile(filePath, 'utf-8')
  const jsonData = JSON.parse(rawData)
  // 附加额外数据
  jsonData.extra = '自定义额外内容'
  return jsonData
})

这种方式无需额外配置，利用Nuxt3对server目录的默认处理即可。

方法三：通过构建钩子手动复制文件 #

如果前两种方法不适用，可在nuxt.config.ts中通过构建钩子手动复制data文件夹到输出目录：

import path from 'path'

export default defineNuxtConfig({
  hooks: {
    'build:done'(nuxt) {
      const fs = require('fs-extra')
      const source = './data'
      const target = path.join(nuxt.options.nitro.output.dir, 'data')
      fs.copySync(source, target)
    }
  }
})

使用前需要先安装依赖：npm install fs-extra --save-dev

以上三种方法均可确保data文件夹在生产构建时被保留，可根据实际场景选择使用。

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