如何在SvelteKit构建前运行脚本？静态项目需API取图存静态文件夹

方案一：利用npm/yarn预脚本（推荐） #

这是最直接的实现方式，npm/yarn会自动在执行build命令前运行前缀为pre的脚本。

1. 在项目根目录的package.json中，修改scripts字段，添加prebuild命令指向你的图片拉取脚本：

{
  "scripts": {
    "prebuild": "node scripts/fetch-images.js",
    "build": "vite build"
  }
}

2. 在项目根目录创建scripts/fetch-images.js文件，编写请求远程API、下载图片到static文件夹的逻辑（比如使用node-fetch发起请求、fs模块写入文件）。

当你执行npm run build或yarn build时，会自动先完成图片拉取，再执行SvelteKit的构建流程。

方案二：使用Vite构建钩子（进阶场景） #

如果需要和Vite构建流程深度集成（比如根据环境变量动态调整拉取逻辑），可以通过Vite的构建钩子实现：

修改项目根目录的vite.config.js（或.ts），添加buildStart钩子：

import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import fetchImages from './scripts/fetch-images.js';

export default defineConfig({
  plugins: [sveltekit()],
  build: {
    async buildStart() {
      // 触发图片拉取脚本
      await fetchImages();
    }
  }
});

注意事项 #

• 脚本需处理错误逻辑，若图片拉取失败应终止构建，避免生成不完整的静态资源。
• 确保图片保存到static目录，SvelteKit构建时会自动将该目录内容复制到输出的静态资源文件夹。
• 使用adapter-static时，必须保证构建前图片已完全下载，否则静态页面可能引用不存在的图片路径。

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