如何在SvelteKit/Vite构建时自动生成可识别的缩略图？

问题根源 #

你之前的脚本将缩略图生成到build/thumbs/目录，但Vite构建流程是先解析页面中的资源引用，再生成build目录。构建阶段Vite无法识别build目录下的文件，因此抛出路径找不到的错误。结合你的需求（静态适配器、无需手动管理、仓库整洁），以下是两种可行方案：

方案1：整合缩略图生成到构建流程 #

1. 配置仓库忽略规则 #

在项目根目录的.gitignore中添加：

static/thumbs/

确保生成的缩略图不会被提交到仓库，保持目录整洁。

2. 修改缩略图生成脚本 #

将脚本目标目录改为static/thumbs/（Vite会扫描该目录），示例使用sharp库（需先安装npm install sharp --save-dev）：

const sharp = require('sharp');
const fs = require('fs').promises;
const path = require('path');

async function generateThumbs() {
  const imagesDir = path.join(__dirname, 'static', 'images');
  const thumbsDir = path.join(__dirname, 'static', 'thumbs');

  // 创建缩略图目录（递归创建多级目录）
  await fs.mkdir(thumbsDir, { recursive: true });

  // 遍历所有漫画文件夹
  const comicDirs = await fs.readdir(imagesDir, { withFileTypes: true });
  for (const dir of comicDirs) {
    if (!dir.isDirectory()) continue;

    const comicThumbDir = path.join(thumbsDir, dir.name);
    await fs.mkdir(comicThumbDir, { recursive: true });

    // 遍历当前漫画的图片文件
    const imageFiles = await fs.readdir(path.join(imagesDir, dir.name));
    for (const file of imageFiles) {
      if (!file.endsWith('.jpg')) continue;

      const inputPath = path.join(imagesDir, dir.name, file);
      const outputPath = path.join(comicThumbDir, file);

      // 生成宽度300px的缩略图（高度自适应）
      await sharp(inputPath)
        .resize({ width: 300 })
        .toFile(outputPath);
    }
  }

  console.log('缩略图生成完成');
}

generateThumbs().catch(err => console.error('生成缩略图失败:', err));

3. 绑定到构建命令 #

修改package.json的build脚本，先执行缩略图生成，再进行SvelteKit构建：

{
  "scripts": {
    "build": "node thumbs.js && svelte-kit build",
    // Windows用户替换为：node thumbs.js && svelte-kit build && rd /s /q static/thumbs
    "build:clean": "node thumbs.js && svelte-kit build && rm -rf static/thumbs"
  }
}

• build命令：生成缩略图后构建，保留static/thumbs用于后续开发
• build:clean命令：构建完成后删除static/thumbs，避免本地目录冗余

方案2：用Vite插件自动生成缩略图 #

无需手写脚本，借助vite-plugin-image-optimizer自动处理图片优化与缩略图生成：

1. 安装插件 #

npm install vite-plugin-image-optimizer --save-dev

2. 配置Vite #

在vite.config.js/ts中添加插件配置：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { imageOptimizer } from 'vite-plugin-image-optimizer';

export default defineConfig({
  plugins: [
    sveltekit(),
    imageOptimizer({
      jpg: { quality: 80 },
      // 生成宽度300px的缩略图，后缀为-thumb
      resize: [
        {
          width: 300,
          suffix: '-thumb'
        }
      ]
    })
  ]
});

3. 修改页面图片路径 #

将缩略图的src从/thumbs/{comic.id}/{page}.jpg改为：

<img src="/images/{comic.id}/{page}-thumb.jpg" alt="Page {page + 1}" title="Page {page + 1}">

插件会在构建时自动为原图生成带-thumb后缀的缩略图，无需手动管理文件。

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