在 Nuxt 3 项目中，将用户上传的文件直接存储到 public 目录并期望通过静态资源服务器直接访问，在开发环境下（yarn dev）可能可行，但在构建部署后（yarn build）却经常遇到 404 错误。这是因为 public 目录主要用于存放静态资源，例如图片、字体、favicon 等，这些资源在构建时会被处理并优化，而动态生成的文件可能不会被正确包含。
问题分析
Nuxt 3 的 public 目录的设计初衷是存放静态资源，这些资源在构建过程中会被静态资源处理器处理，例如优化、压缩等。对于动态生成的文件，例如用户上传的图片，Nuxt 3 默认不会将其视为静态资源进行处理。因此，在构建后，这些文件可能无法被正确访问。
此外，直接将用户上传的文件暴露在 public 目录下也存在安全风险。例如，恶意用户可能会上传包含恶意代码的文件，并通过 URL 直接访问执行。
解决方案：构建 API 端点
更安全和可靠的解决方案是构建一个 API 端点来提供文件访问服务。这样可以对文件访问进行权限控制，并避免直接暴露 public 目录。
步骤 1：创建 API 端点
在 server/api 目录下创建一个 API 端点，例如 server/api/files/[filename].ts。
import { defineEventHandler, readParams } from 'h3'
import fs from 'node:fs'
import path from 'node:path'
export default defineEventHandler((event) => {
const { filename } = readParams(event)
// 假设文件存储在 public/uploads 目录下
const filePath = path.join('public/uploads', filename)
try {
// 检查文件是否存在
if (!fs.existsSync(filePath)) {
throw new Error('File not found')
}
// 读取文件内容
const fileContent = fs.readFileSync(filePath)
// 设置响应头
event.node.res.setHeader('Content-Type', 'image/jpeg') // 根据文件类型设置
event.node.res.setHeader('Cache-Control', 'public, max-age=31536000') // 设置缓存
// 返回文件内容
return fileContent
} catch (error: any) {
console.error(error)
throw createError({
statusCode: 404,
statusMessage: 'File Not Found',
})
}
})步骤 2：创建 uploads 目录
在 public 目录下创建一个 uploads 目录，用于存放用户上传的文件。
步骤 3：更新文件上传逻辑
更新文件上传的逻辑，将文件存储到 public/uploads 目录下。
步骤 4：访问文件
使用 API 端点访问文件，例如 /api/files/example.jpg。
代码解释
- defineEventHandler：定义一个 API 端点处理函数。
- readParams：读取 URL 参数，例如文件名。
- fs.readFileSync：同步读取文件内容。
- event.node.res.setHeader：设置响应头，例如 Content-Type 和 Cache-Control。
- createError：创建错误响应。
注意事项
- 需要根据实际的文件类型设置 Content-Type。
- 可以根据需要添加权限控制逻辑，例如验证用户身份。
- 建议使用更安全的文件存储方案，例如云存储服务（AWS S3, Azure Blob Storage, Google Cloud Storage）。
- 确保 public/uploads 目录存在，并且服务器进程有权限读取该目录。
- 如果需要支持多种文件类型，需要根据文件扩展名动态设置 Content-Type。
总结
通过构建 API 端点，我们可以安全地提供用户上传文件的访问服务，避免直接暴露 public 目录，并可以灵活地控制文件访问权限。虽然增加了代码复杂度，但提升了安全性和可维护性。对于生产环境，建议使用云存储服务来存储用户上传的文件，以获得更好的性能和可靠性。
