Nuxt执行generate时如何复制XML流中的外部图片？

一、static与assets的选型建议 #

• static文件夹：更适合你的场景。这里的资源不会经过Webpack编译，构建时会原封不动复制到dist目录，动态下载的外部图片放在这里，可直接通过绝对路径访问，无需额外处理。
• assets文件夹：用于存放需要Webpack编译压缩的本地资源（如项目内的图标、样式文件），不适合动态获取的外部资源。

二、你的代码问题核心 #

你当前用fs.writeFileSync(dest, url, 'ascii')是把URL字符串直接写入了文件，而非远程图片的二进制内容，所以文件仅几十字节，自然无法正常打开。

三、正确实现方案 #

需要先通过HTTP请求获取远程图片的二进制数据，再写入本地文件。推荐用node-fetch简化请求流程：

1. 依赖安装 #

npm install node-fetch

2. 修改nuxt.config.js代码 #

import fs from 'fs'
import path from 'path'
import fetch from 'node-fetch'

export default {
  // ...其他配置项
  generate: {
    async routes() {
      const imgUrl = 'https://via.placeholder.com/300/09f/fff.png'
      const destPath = path.resolve(__dirname, 'static/images/fff.png')
      
      // 自动创建目标目录（避免因目录不存在写入失败）
      const destDir = path.dirname(destPath)
      if (!fs.existsSync(destDir)) {
        fs.mkdirSync(destDir, { recursive: true })
      }

      // 下载图片二进制内容并写入文件
      const response = await fetch(imgUrl)
      if (!response.ok) {
        throw new Error(`图片下载失败: ${response.statusText}`)
      }
      const imgBuffer = await response.buffer()
      fs.writeFileSync(destPath, imgBuffer)

      // 若需生成动态路由，在此返回路由数组即可，示例：return ['/post/1', '/post/2']
      return []
    }
  }
}

关键说明 #

• 先检查并创建目标目录，避免因目录不存在导致写入失败；
• 通过fetch请求图片资源，用response.buffer()获取二进制数据，再写入文件，确保生成的是完整可读取的图片；
• 如果项目需要动态生成路由，在routes函数末尾返回对应的路由数组即可。

四、测试验证 #

执行npm run generate后，查看static/images/fff.png，即可得到正常可打开的300x300蓝色占位图片。

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