在SvelteKit项目中如何正确导入并读取文本文件？

首先明确：SvelteKit的静态资源只能放在**static文件夹**下，项目中不存在默认的public目录，把你的safety.txt放到static文件夹即可，不需要额外配置。

组件客户端加载方案 #

你的代码有两个核心问题：

• fetch路径错误：static下的文件会直接映射到网站根路径，应该用/safety.txt而非public/safety.txt
• 未初始化items为空数组，导致定时器启动时items.length为undefined，引发报错

修正后的组件代码：

<script>
    import { onMount, onDestroy } from 'svelte';

    let items = [];
    let currentIndex = 0;
    let interval;

    const loadItems = async () => {
        const response = await fetch('/safety.txt');
        if (!response.ok) throw new Error('加载文件失败');
        const text = await response.text();
        items = text.split('\n\n');
        startInterval();
    };

    const startInterval = () => {
        interval = setInterval(() => {
            currentIndex = Math.floor(Math.random() * items.length);
        }, 5000);
    };

    $: currentItem = items[currentIndex];

    onMount(() => {
        loadItems();
    });

    onDestroy(() => {
        if (interval) clearInterval(interval);
    });
</script>

{#if currentItem}
    <p>{currentItem}</p>
{:else}
    <p>加载中...</p>
{/if}

服务器端加载方案 #

服务器端不需要用fetch，直接通过Node.js的文件系统模块读取更高效，比如在页面的load函数中处理：

// +page.server.js
import fs from 'fs/promises';
import path from 'path';

export async function load() {
    const filePath = path.join(process.cwd(), 'static', 'safety.txt');
    const text = await fs.readFile(filePath, 'utf8');
    const items = text.split('\n\n');
    
    return { items };
}

然后在组件中直接使用服务器返回的数据：

<script>
    import { onMount, onDestroy } from 'svelte';
    export let data;
    let currentIndex = 0;
    let interval;

    $: currentItem = data.items[currentIndex];

    onMount(() => {
        interval = setInterval(() => {
            currentIndex = Math.floor(Math.random() * data.items.length);
        }, 5000);
    });

    onDestroy(() => {
        clearInterval(interval);
    });
</script>

<p>{currentItem}</p>

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