Svelte预览生产构建无法加载本地JSON文件问题咨询

安全阿岳

2026-7-14

解决Svelte静态部署时动态JSON文件加载失败的问题

问题根源

使用/* @vite-ignore */跳过了Vite的资源处理流程，导致构建时data/gameData下的JSON文件不会被复制到dist目录，预览或部署后自然找不到对应文件。
动态导入的相对路径在生产环境路由结构下，浏览器实际请求的路径与文件实际存储位置不匹配。

修复步骤

1. 迁移JSON文件到静态资源目录

SvelteKit的static目录下的文件会被完整复制到构建后的dist根目录，所以：

在项目根目录创建static/data/gameData文件夹，将所有{gameID}.json文件移至该目录。
若allLocos.json后续也需要动态访问，同样移到static/data/locoData/目录下。

2. 修改加载逻辑与路径

替换动态import为fetch，并使用绝对路径指向静态资源：

<script>
    import { onMount } from 'svelte';
    import { page } from '$app/stores';
    const gameId = $page.params.gameId;

    let jsonData, gameRoutes, gameLocos, gameName, gameSysnopsis, routesCopy, locosCopy;
    
    // 改用绝对路径，指向static目录下的文件
    const dataPath = `/data/gameData/${gameId}.json`;
    import locoData from '../../../data/locoData/allLocos.json';
    

    const result = locoData.locos.filter(loco => loco.game === gameId);
    
    onMount(async () => {
        // 用fetch直接请求静态JSON文件，替代动态import
        const res = await fetch(dataPath);
        jsonData = await res.json();
        
        gameRoutes = jsonData.dlcRoutes;
        gameLocos = jsonData.dlcLocos
        gameName = jsonData.name;
        gameSysnopsis = jsonData.synopsis;
        routesCopy = jsonData.routesCopy;
        locosCopy = jsonData.locosCopy;
    });
</script>