Svelte项目集成@vitejs/plugin-legacy执行npm run build报错求助

问题根源 #

直接在Vite配置中同时启用sveltekit和legacy插件会破坏SvelteKit的构建流程——legacy插件会修改Vite的输出结构，导致SvelteKit无法找到它生成的manifest.json文件。

正确适配旧浏览器的方案 #

方案1：使用SvelteKit内置的目标浏览器配置（推荐） #

SvelteKit可通过Vite的build.target配置指定目标浏览器，无需额外插件，且不会干扰原有构建流程：
修改vite.config.ts：

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [sveltekit()],
    server: {
        fs: {
            allow: ['..']
        }
    },
    build: {
        // 指定兼容的目标浏览器范围，等价于legacy插件的defaults配置
        target: ['defaults', 'not IE 11']
    }
};

export default config;

方案2：兼容@vitejs/plugin-legacy的配置（需调整参数） #

如果必须使用@vitejs/plugin-legacy（比如需要生成单独的兼容代码块），需调整插件顺序和参数：

import { sveltekit } from '@sveltejs/kit/vite';
import legacy from '@vitejs/plugin-legacy';

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [
        // 先注册legacy插件，再注册sveltekit
        legacy({
            targets: ['defaults', 'not IE 11'],
            modernPolyfills: true,
            // 关闭独立兼容块生成，避免干扰SvelteKit输出结构
            renderLegacyChunks: false
        }),
        sveltekit()
    ],
    server: {
        fs: {
            allow: ['..']
        }
    }
};

export default config;

通用修复步骤：清理缓存后重新构建 #

无论使用哪种方案，执行以下命令清理缓存后再构建，避免残留文件导致异常：

# Linux/macOS
rm -rf .svelte-kit node_modules package-lock.json
npm install
npm run build

# Windows
rd /s /q .svelte-kit node_modules
del package-lock.json
npm install
npm run build

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