0

我正在尝试使用mdsvex创建降价博客。我已经使用npx svelte-add@latest mdsvex. 然后我创建一个[slug].svelte文件,以便我可以测试它是否有效:

// src/routes/posts/[slug].svelte

<script context="module">
    export async function load({ page }) {
        const Hello = (await import('../../posts/hello.md')).default;

        return {
            props: { Hello }
        };
    }
</script>

<script>
    export let Hello;
</script>


<Hello />

这完全符合我的要求。如果我导航到localhost:3000/posts/hello,它会加载src/posts/hello.md文件并正确显示它。

现在我想让[slug].svelte文件动态化。所以我将其更改如下:

// src/routes/posts/[slug].svelte

<script context="module">
    export async function load({ page }) {
        const Post = (await import(`../../posts/${page.params.slug}.md`)).default;

        return {
            props: { Post }
        };
    }
</script>

<script>
    export let Post;
</script>

<Post />

但是,这不起作用。如果我刷新localhost:3000/posts/hello页面,我会收到以下错误:

failed to load module for ssr: posts/hello.md

Error: failed to load module for ssr: posts/hello.md
    at instantiateModule (C:\code\learn\svelte\blog-2\node_modules\vite\dist\node\chunks\dep-f2b4ca46.js:73353:15)

知道为什么这不起作用以及我能做些什么来解决它吗?

谢谢。

4

0 回答 0