我正在尝试使用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)
知道为什么这不起作用以及我能做些什么来解决它吗?
谢谢。