nuxt3项目上线后/public里动态添加图片无法访问?

Question

nuxt3项目上线后/public里动态添加图片无法访问

------------👍🏻👍🏻👍🏻问题已解决，感谢楼下评论的两位大佬👍🏻👍🏻👍🏻---------------

现在我对遇到的问题以及解决方案补充一点详细信息

遇到的问题：我们有个test.xml文件是每天都要动态更新的，放在主域名下的/rss/test.xml路径。以前老的的nuxt是可以直接在static文件夹下面创建/rss/test.xml就可以的，但是nuxt3在public下面创建之后访问显示404

解决方案：最终采用的是通过服务端中间件来解决的，具体做法是创建/server/routes/rss/[name].get.ts

[name].get.ts的内容如下

import { existsSync, readFileSync } from 'node:fs'
import { dirname, join } from 'node:path'
import { fileURLToPath } from 'node:url'
const __dirname = dirname(fileURLToPath(import.meta.url))
const audiosPath = './rss'
export default defineEventHandler(async event => {
    const filename = decodeURIComponent(event.context.params?.name || '')
    try {
        if (!filename) {
            throw createError('missing filename path params')
        }
        const filePath = join(__dirname, '../../.output/public', audiosPath, filename)
        if (existsSync(filePath)) {
            let data = readFileSync(filePath)
            event.res.setHeader('Content-Type', 'application/xml');
            event.res.end(data);
            return 
        } else {
            return null
        }
    } catch (error) {
        return null
    }
})

Answer 1

不可以的，nuxt 为了性能优化，只会 serve 打包时已有的内容。可以考虑使用以下方法

server/routes/resources/[name].get.ts

Answer 2

1. 对于需要动态更新的图片,建议使用独立的文件服务或 CDN

2. 如果必须在应用服务器上存储,建议:

   • 将动态文件存储在 public 目录外的专门目录
   • 使用服务端中间件处理文件请求
   • 实现适当的缓存策略

你也可以根据具体需求选择:

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    static: {
      // 配置额外的静态文件目录
      directories: [
        {
          dir: 'custom-public',
          path: '/custom-public'
        }
      ]
    }
  }
})