routes - 部署到 Netlify 时，Sapper Svelte 路由不起作用且页面丢失

Question

我看到其他人问过这个问题，但似乎没有其他答案有帮助。

我有一个基本的 svelte/sapper 应用程序，它有一个导航栏组件。

在本地，导航栏和网站功能完美，但是，当部署到 netlify 时(并使用 npm run dev 和 __sapper__/export )，我遇到了一些问题。 ..

1. 第一个问题是我的 ChartJS 图表无法加载。也许这是另一个问题，但可能相关

2. 单击导航链接时，网址会更改为浏览器中的正确网址，但页面无法加载。但是，在单击导航链接并看到 URl 出现在浏览器搜索栏中后，我可以重新加载页面，并且将加载所需的页面(但同样，没有任何 ChartJS 图表)，但是，它在路线的终点(它不在本地执行)。

3. 当尝试访问不在导航栏中的路线时，我收到“找不到页面”错误，尽管它出现在本地。

我之前使用相同的命令部署了一个 sapper 站点，但由于某种原因，该站点无法工作。

唯一相关的代码是我的_layout.svelte，它保存着我的导航栏，因此它会出现在所有屏幕上。我相信类似于 Vue 之类的默认布局。

    import Nav from '../components/Nav.svelte';

<style>

</style>

<Nav/>
<main>
    <slot></slot>
</main>

我似乎找不到任何修复，至少是对我有用的修复。

令我非常困惑的是，为什么我的一条路线会出现“找不到页面”错误，尽管该路线存在。为什么只有该路由不会出现在 netlify 上，而不会出现我从浏览器搜索栏直接路由到的其他路由。

预先感谢您的任何建议。

Answer 1

sapper 导出脚本的工作原理是从入口点(通常是 index.svelte)开始，然后“单击”所有可见链接以像这样爬行到所有页面。它将把访问的每个页面呈现为单独的 .html 文件，该文件可以由您的主机(在本例中为 Netlify)直接提供服务。

这意味着无法通过单击显示的链接直接访问的每个都将不会被导出，这会导致一些问题您的问题:

404页面/其他页面

我想您没有直接链接到您的 404 页面，是吗？ :) 您可以通过在导出命令中指定端点来告诉 sapper 从多个端点开始

"export": "sapper export --entry "/ /404"",

由于它仅点击显示的链接，因此还有另外 2 个常见问题

• 充当链接的按钮
• 隐藏在按钮后面的链接(例如汉堡菜单)

解决第一个问题很简单:如果它是一个链接，它就应该是一个链接，不要使用链接按钮，您始终可以将链接样式设置为看起来像按钮

(这个可能不适用于您，因为您的页面似乎已导出，只是为将来的读者添加 if ) 第二个需要更多工作，但通常可以通过在标记中的某处添加导航中可用的不可见链接列表来解决。

<nav>
  {#if navigationOpen}
    <a href="">...</a>
  {/if}
  <div style="visibility: hidden; position: absolute">
    <a href="">...</a>
  </div>
</nav>

在上面的示例中，我在隐藏部分中复制了菜单，这可以被工兵拾取，我个人将其与导航一起保留，因此当我更改导航时我不会忘记更改链接，但您可以也可以将此 div 放在您的索引页上。 (另一种方法是在目标网页上提供指向每个部分的可见链接!)

ChartJS 未加载

我认为这可能是另一个问题，您可以做的是在本地导出并检查您的 ChartJs 脚本是否从 statics 文件夹中正确复制。还要检查脚本的路径是否正确，最好在模板中在静态文件的所有路径前面加上/，以确保浏览器从根 url 查找它们。

<!-- on page myhost.com/page/blob -->
<!-- points to myhost.com/page/blob/library.js -->
<script src="library.js"></script>
<!-- points to myhost.com/library.js -->
<script src="/library.js"></script>

未导航

我以前没有听说过或见过这个，但它可能与前面的几点有关，您可以随时在本地导出并在本地提供站点，看看这是否不是 netlify 上的配置问题？