Nuxt3中从assets下CSV文件通过API返回JSON报错求助

问题原因 #

1. 服务端环境不识别客户端的~/路径别名，~/assets/list.csv无法被解析为正确的文件路径，触发“File does not exist”错误。
2. API返回的键名是data，但组件中解构的是restaurants，即使路径修复，前端也无法获取对应数据。

解决方案 #

方案一：用绝对路径读取assets目录下的CSV #

修改server/api/restaurants.js代码，通过Node.js的path模块构建文件绝对路径：

import csv from 'csvtojson'
import path from 'path'
import { fileURLToPath } from 'url'

export default defineEventHandler(async () => {
  // 获取当前API文件的绝对路径
  const __filename = fileURLToPath(import.meta.url)
  const __dirname = path.dirname(__filename)
  // 从server/api目录向上两级定位到项目根目录下的assets文件
  const csvFilePath = path.resolve(__dirname, '../../assets/list.csv')
  
  const restaurantsData = await csv().fromFile(csvFilePath)
  // 返回与组件解构匹配的键名
  return { restaurants: restaurantsData }
})

方案二：将CSV移至public目录（更简洁） #

把assets/list.csv移动到项目根目录的public文件夹下，再修改API代码：

import csv from 'csvtojson'
import path from 'path'
import { fileURLToPath } from 'url'

export default defineEventHandler(async () => {
  const __filename = fileURLToPath(import.meta.url)
  const __dirname = path.dirname(__filename)
  const csvFilePath = path.resolve(__dirname, '../../public/list.csv')
  
  const restaurantsData = await csv().fromFile(csvFilePath)
  return { restaurants: restaurantsData }
})

验证 #

确保组件中的useFetch调用能正确获取数据：

// 组件代码片段
const { restaurants } = await useFetch('/api/restaurants')

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