部署到Netlify的Sapper Svelte路由不起作用并且页面丢失 404页/其他页面 ChartJS未加载不导航

如何解决部署到Netlify的Sapper Svelte路由不起作用并且页面丢失 404页/其他页面 ChartJS未加载不导航

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

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

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

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

2. 单击导航链接时，URL会更改为我的浏览器中的正确URL，但不会加载该页面。但是，在单击导航链接并看到URl出现在浏览器搜索栏中之后，我可以重新加载页面，然后将加载所需的页面（但同样，没有任何chartJS图表），但是，它向路线的尽头（它不在本地执行）。

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

我以前使用相同的命令部署了一个精工站点，但是由于某些原因，该站点将无法正常工作。

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

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

<style>

</style>

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

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

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

预先感谢您的任何建议。

解决方法

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

这意味着通过点击显示的链接直接不可访问的每个将不可导出，这会导致一些您的问题：

404页/其他页面

我想您不直接链接到404页面吗？ :) 您可以通过在导出命令中指定精简工具来告诉精简工具从多个端点开始

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

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

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

解决第一个问题很容易：如果它是一个链接，它应该是一个链接，不要使用按钮作为链接，您可以始终将链接样式设置为按钮

（此选项可能不适用于您，因为似乎您的页面已导出，如果将来有读者可以添加） 第二个工作量更大，但通常可以通过在标记中的导航中添加不可见的链接列表来解决。

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

在上面的示例中，我在一个隐藏的部分中复制了菜单，此菜单可以由工兵处理，我个人将其保存在导航栏中，因此当我更改导航时，我不会忘记更改链接，但是您可以并将此div放在索引页面上。 （另一种方法是在目标网页上的每个部分都有可见的链接！）

ChartJS未加载

我认为这可能是另一个问题，您可以在本地导出并检查是否从statics文件夹中正确复制了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上的配置问题？