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

Question

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

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

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

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

2. 单击导航链接时，URL 会在我的浏览器中更改为正确的 URL，但无法加载页面。但是，在单击导航链接并看到 URl 出现在浏览器搜索栏中后，我可以重新加载页面并加载所需的页面（但同样，没有任何 chartJS 图表），但是，它添加了一个“/”到路线的尽头（它不在本地做）。

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

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

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

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

<style>

</style>

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

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

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

提前感谢您的任何建议。

Answer 1

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

这意味着 每个 是 not 通过单击显示的链接直接访问的将 not 被导出，这会导致一些 o你的问题：

404 页面/其他页面

我想你不会直接链接到你的 404 页面吧？ :) 您可以通过在导出命令中指定它们来告诉 sapper 从多个端点开始

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

由于它只点击显示的链接还有另外两个常见问题

• 用作链接的按钮
• 隐藏在按钮后面的链接（例如汉堡菜单）

解决第一个问题很容易：如果是链接，则应该是链接，不要使用按钮作为链接，您可以随时设置链接的样式，使其看起来像一个按钮

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

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

在上面的示例中，我在隐藏部分中复制了菜单，这可以由工兵拾取，我个人将其与导航一起保存，所以当我更改导航时我不会忘记更改链接，但你可以以及将此 div 放在您的索引页面上。 （另一种方法是在着陆页上的每个部分都有可见的链接！）

ChartJS 未加载

我认为这可能是另一个问题，您可以做的是在本地导出并检查您的 ChartJs 脚本是否从静态文件夹中正确复制。还要检查脚本的路径是否正确，最好在模板中将所有静态文件的路径都添加一个 / 以确保浏览器从根 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上的配置问题？