全静态SvelteKit项目加载多格式数据：位置与方法

1. 数据文件存放位置选择 #

根据SvelteKit最新设计和你的静态站点需求，三个目录的适用场景如下：

- static文件夹 #

适合无需构建时处理、直接暴露给客户端访问的数据文件（比如允许用户下载原始文件）。文件会被原样复制到构建产物的根目录，可通过/xxx路径直接访问。缺点是无法在构建时用Node API读取处理，只能客户端加载。

- 顶级data文件夹（项目根目录，非src下） #

SvelteKit约定的构建时专用数据目录，文件不会被公开访问，仅能在服务端/构建阶段通过Node API读取。适合需要预解析、处理后再传给页面的数据，完全适配你的prerender: true静态站点需求。

- $lib/data文件夹 #

适合与业务逻辑绑定、需要在多个组件/路由复用的数据文件。和顶级data目录类似，可在构建时读取，优势是模块化程度更高，便于和lib中的工具函数配合处理数据。

推荐方案：如果你的数据需要在预渲染时解析并注入页面，选择顶级data文件夹或**$lib/data文件夹**；如果需要客户端动态加载或允许用户下载原始文件，选择static文件夹。

2. 对应加载方式 #

方案一：存放在顶级data文件夹（推荐） #

1. 在项目根目录创建data文件夹，放入data_1000.csv。
2. 修改+page.js，在构建时用Node API读取并解析：

/** @type {import('./$types').PageLoad} */
import fs from 'fs';
import path from 'path';
import { parse } from 'csv-parse/sync'; // 需先安装：npm install csv-parse

export function load() {
    // 获取数据文件绝对路径
    const filePath = path.join(process.cwd(), 'data', 'data_1000.csv');
    const csvContent = fs.readFileSync(filePath, 'utf8');
    
    // 解析CSV为结构化数据（根据你的文件格式调整配置）
    const tableData = parse(csvContent, {
        columns: true, // 若第一行是表头则开启
        skip_empty_lines: true
    });

    return { tableData };
}

3. 在+page.svelte中直接使用：

<script>
    /** @type {import('./$types').PageData} */
    export let data;
</script>

<table>
    <thead>
        <tr>
            {#each Object.keys(data.tableData[0]) as col}
                <th>{col}</th>
            {/each}
        </tr>
    </thead>
    <tbody>
        {#each data.tableData as row}
            <tr>
                {#each Object.values(row) as val}
                    <td>{val}</td>
                {/each}
            </tr>
        {/each}
    </tbody>
</table>

方案二：存放在$lib/data文件夹（你的现有结构） #

修改+page.js，通过import.meta.url获取正确路径：

/** @type {import('./$types').PageLoad} */
import fs from 'fs';
import path from 'path';
import { parse } from 'csv-parse/sync';

export function load() {
    // 构建时获取lib/data的绝对路径
    const libDataDir = new URL('../lib/data', import.meta.url).pathname;
    const filePath = path.join(libDataDir, 'data_1000.csv');
    const csvContent = fs.readFileSync(filePath, 'utf8');
    const tableData = parse(csvContent, { columns: true });

    return { tableData };
}

页面使用方式和方案一完全一致。

方案三：存放在static文件夹 #

1. 在static目录下创建data文件夹，放入data_1000.csv。
2. 客户端动态加载（适合大数据或无需预渲染的场景）：

<script>
    /** @type {import('./$types').PageData} */
    export let data;
    import { onMount } from 'svelte';
    import { parse } from 'csv-parse/sync';

    let tableData = [];

    onMount(async () => {
        // 从根路径fetch文件
        const res = await fetch('/data/data_1000.csv');
        const csvContent = await res.text();
        tableData = parse(csvContent, { columns: true });
    });
</script>

<!-- 渲染表格 -->
{#if tableData.length}
    <table>
        <!-- 表格结构同方案一 -->
    </table>
{:else}
    <p>加载中...</p>
{/if}

或者在预渲染时通过fetch加载（需确保路径正确）：

/** @type {import('./$types').PageLoad} */
import { parse } from 'csv-parse/sync';

export async function load({ fetch }) {
    // 用根路径访问static下的文件
    const res = await fetch('/data/data_1000.csv');
    const csvContent = await res.text();
    const tableData = parse(csvContent, { columns: true });

    return { tableData };
}

你之前遇到的问题说明 #

• fetch相对路径错误：静态站点中，fetch的相对路径是相对于当前路由的，而非文件系统路径。需使用根路径（如/data/data_1000.csv）访问static下的文件。
• Node fs无法工作：若在客户端代码中调用fs会直接报错（浏览器环境不支持）；若在load函数中报错，大概率是路径错误——需用process.cwd()或import.meta.url获取绝对路径，而非相对路径。

内容的提问来源于stack exchange，提问作者Otávio Vasques