Nuxt3中如何读取txt文件？文件存放位置咨询

能不能在Nuxt3中读取文件？ #

当然可以，但要区分服务器端和客户端场景：

• 客户端浏览器环境没有Node.js的fs模块，无法直接用fs读取本地文件，只能通过HTTP请求获取公开文件。
• 服务器端（比如server/api、server/routes中的代码，或是asyncData/fetch的服务器端执行部分）可以正常使用fs读取本地文件。

文件应该放在哪个位置？ #

根据使用场景选择不同目录：

1. 服务器端专属读取（适合敏感数据、不需要客户端访问的文件）

将文件放在项目根目录下的server文件夹内，比如server/data/data.txt。Nuxt构建时会完整保留server目录的结构，打包到.output/server下，读取时路径不会混乱。

2. 客户端/服务器端都能访问（适合公开数据）

将文件放在public文件夹内，比如public/data/data.txt。这个目录下的文件会被原样复制到构建后的根目录，客户端可以通过HTTP请求（比如/data/data.txt）获取，服务器端也可以用fs读取构建后的对应路径，或者同样用fetch请求。

注意：你原来的src/resources目录不是Nuxt默认处理的目录，构建后不会被复制到.output中，所以程序找不到文件。

针对你的代码修改方案 #

方案一：服务器端读取（推荐）

调整文件位置到server/data/data.txt，并修改读取函数确保只在服务器端执行：

import fs from 'fs/promises'
import path from 'path'
import { fileURLToPath } from 'url'

async function readData(fname: string): Promise<string | undefined> {
  // 限制仅在服务器端执行
  if (!import.meta.server) {
    console.error('该函数只能在服务器端调用')
    return
  }

  const __filename = fileURLToPath(import.meta.url)
  const __dirname = path.dirname(__filename)
  
  try {
    // 假设当前函数文件在server/utils下，路径指向../data/data.txt
    const data = await fs.readFile(path.resolve(__dirname, fname), 'utf-8')                           
    return data
  } catch (err) {
    console.error(err)
  }
}

方案二：客户端读取（公开数据）

将文件移到public/data/data.txt，改用fetch读取：

async function readData(fname: string): Promise<string | undefined> {
  try {
    const res = await fetch(`/${fname}`)
    if (!res.ok) throw new Error('文件请求失败')
    const data = await res.text()
    return data
  } catch (err) {
    console.error(err)
  }
}

// 调用示例：readData('data/data.txt')

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