Nuxt3构建后新增图片应存储于何处？原Nuxt2方案失效

针对你遇到的问题，以下是几种可行的解决方案，可根据使用场景选择：

1. 本地预览构建产物的临时方案 #

如果是在本地执行nuxt build后，通过nuxt preview预览时需要新增图片：

• 直接将图片放到项目构建生成的.output/public目录下，前端可通过/xxx.jpg的路径直接访问。
• 注意：该方式仅适用于本地预览，.output属于构建产物，部署时不会保留新增内容。

2. 生产部署场景的持久化方案 #

方案A：利用Nitro自定义静态资源目录 #

在nuxt.config.ts中配置额外的静态资源目录，让Nuxt3的Nitro服务器自动处理资源访问：

export default defineNuxtConfig({
  nitro: {
    publicAssets: [
      {
        dir: './uploads', // 自定义本地目录，可自行命名
        baseURL: '/uploads' // 前端访问的路径前缀
      }
    ]
  }
})

• 配置完成后，将构建后新增的图片放到项目根目录的uploads文件夹，前端通过/uploads/[图片文件名]访问即可。
• 该目录不会在构建时被打包到.output，Nitro会在运行时直接读取目录内容，适合生产环境动态新增资源的场景。

方案B：服务器静态文件目录挂载 #

如果项目通过Nginx等反向代理部署：

• 在服务器上单独创建存放动态新增图片的目录（比如/var/www/uploads）。
• 在Nginx配置中添加静态资源路由指向该目录：

location /uploads/ {
    root /var/www;
    expires 30d;
}

• 前端直接通过/uploads/[图片文件名]访问新增图片，无需修改Nuxt项目配置。

方案C：使用CDN存储 #

将构建后新增的图片上传到CDN服务，前端直接使用CDN提供的完整URL访问图片。该方案适合大流量、多服务器部署场景，可减轻服务器资源压力。

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