无法使用 Sapper 导出生成动态路由

Question

我有一条动态路线：

routes/artwork/[slug].svelte.

与 npm run dev 配合使用效果很好。

但是当我 npm run export 时，那些动态 slug 路由丢失了。我在 __sapper__/export 中没有看到它们，当我上传到 Netlify 时，这些页面也丢失了。

有什么办法可以解决这个问题吗？我是不是漏掉了什么明显的东西？

Answer 1

sapper export 的工作方式是构建您的应用程序，运行它，然后访问 / 并递归访问它找到的每个内部 link。出于这个原因，必须能够通过主页上的 links 到达 /artwork/foo 和 /artwork/bar 等（例如，通过 routes/artwork/index.svelte 页面，这将映射至 /artwork).

Answer 2

要向添加其他上下文：

如果在动态路由之前错误地抓取了相似的路由URL，它不会尝试生成动态路由。

主页 link 使用 "/events/slug" 而不是 href="events/slug"，开发站点将在主页 link 上正确提供 404，并在活动页面。但是，在构建时，根本不会生成 slug。

Answer 3

正如 collardeau 在我的例子中提到的，问题是我将我的页面组件包装在一个 TransitionWrapper 组件中，该组件具有 {#if show} 开始和 false在挂载时翻转为 true。一个简单的解决方法是使用 true 启动它，然后在 mount:

上翻转它两次

// TransitionWrapper.svelte
...
let show = true;

onMount(() => {
    show = false;
    show = true;
});
...

由于代码是在 onMount 内部执行的，根据我的测试，它可以正常工作运行

Answer 4

万一有人遇到这个问题。上面的解决方案并没有真正帮助，因为 我有很多嵌套路由，你不能使用 --entries 方法指定这些路由。

然而，有效的方法是在我的 routes 文件夹中创建一个 404.svelte 文件，然后将其添加到我的 package.json

"export": "sapper export --legacy --entry \"/ /404\"",
"postexport": "mv __sapper__/export/404/index.html __sapper__/export/404.html",

这个解决方案的来源来自这个github issue

无法使用 Sapper 导出生成动态路由

Failing to generate dynamic routes with Sapper export

svelte

sapper