Nuxt3项目build后public文件夹上传文件无法访问的解决求助

核心原因 #

Nuxt3的public目录是编译时静态资源目录：执行yarn build时，Nuxt会把public内的所有文件打包到dist目录，生产环境服务器只会从dist读取静态资源。而你运行时动态上传到项目public目录的文件，不会被同步到dist里，自然会出现404；yarn dev环境下Nuxt会实时监听public目录的变化，所以能正常访问。

具体解决步骤 #

• 创建独立的上传目录：在项目根目录新建uploads文件夹，专门存放用户上传的文件（这个目录不会被Nuxt打包）。
• 配置服务器中间件提供静态文件服务：
  在server/middleware目录下新建serve-uploads.ts文件，写入以下代码：

  import { createStaticHandler } from 'h3'
  const serveUploads = createStaticHandler('uploads', {
    prefix: '/uploads'
  })
  export default defineEventHandler(async (event) => {
    return serveUploads(event) || null
  })
  

• 修改上传逻辑：把文件保存路径从public改为uploads目录。比如用Node.js的fs模块写入文件时，路径改为./uploads/[文件名]。
• 访问上传文件：通过/uploads/[文件名]的路径访问，比如http://your-domain/uploads/xxx.png。
• 部署注意事项：部署时确保uploads目录存在，如果用Docker或自动化部署脚本，可添加创建目录的命令（如mkdir -p uploads）。

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