如何返回所有 URL 的苗条应用程序？答案

【问题标题】：How to return the svelte app for all URLs?如何返回所有 URL 的苗条应用程序？
【发布时间】：2020-04-30 16:43:51
【问题描述】：

当我请求 '/' 时，应用程序可以运行，但是当我请求 '/foo' 时，我收到 404 错误。

如何返回所有路线的应用程序？

【问题讨论】：

我认为我们无法理解您的问题，或者在没有看到相关代码的情况下能够为您提供帮助。
没有相关代码。这是新的轻量级应用程序的默认行为。
您需要做的是将所有路由重定向到/。 This 或 this 可能会有所帮助。

标签： node.js svelte

【解决方案1】：

我设法在开发中通过将--single 标志添加到start 命令来做到这一点，但我仍然不知道如何部署它。

【讨论】：

【解决方案2】：

Svelte 不是网络服务器。一个 Svelte 项目编译成一个 HTML 页面和相关的 JS 和 CSS 包，就是这样。

如果您想处理所有路由并重定向到应用程序的根目录 (/)，那么您必须配置您正在运行的任何 Web 服务器（Apache、nginx、...）来为您执行此操作，或者您必须设置一个后端（例如 Node + Express）来处理一个包罗万象的“通配符”路由并重定向到根路由或立即提供您的 Svelte 页面（如果您打算使用例如路由器客户端）。

一些托管服务，如 Surge、Now（oops、Tercel）、Heroku 等，也可能允许您将项目配置为自动重定向到根路径或从包罗万象的路径提供内容。

【讨论】：

【解决方案3】：

我一直在努力实现与 OP 相同的目标。鉴于 Svelte 中缺乏文档，这是我找到的解决方案，适用于在 Surge 上的部署。

Surge documentation on routing 让我明白我需要一个 200.html 文件才能在客户端正确处理路由。尽管如此，我仍然需要一个index.html 文件来处理本地主机上的应用程序。我终于想出在构建阶段使用rollup-plugin-copy 将index.html 复制到200.html 页面，以便Surge 拥有该页面来按预期处理路由。

rollup.config.js中的相关代码：

import copy from 'rollup-plugin-copy'

export default {
  
  plugins: [
    ...
    copy({
      targets: [
        { src: 'public/index.html', dest: 'public', rename: '200.html' }
      ]
    })
  ]
}

请注意，编译后的文件将转到public 目录。如果您将文件编译到另一个目录（例如dist），请修改代码。

【讨论】：

【解决方案4】：

这取决于您部署它的位置。将“/”作为特定组件的功能存在于 Web 服务器软件中。 '--start' 显然适用于开发服务器。

如果您使用的是 sapper，那么如果您执行“npm start”，它应该可以工作。如果您只是以其他方式提供单页 index.html，请搜索 deploy spa 或 routing index.html 以及将其部署到的任何服务器软件（即 deploy spa apache）。

如果您想拦截该路径并对其进行任何操作，这还取决于您使用的路由。我不知道怎么做[用工兵]，也许定义一个默认的蛞蝓？其他路由库会有自己的方式。通常，您定义一个包罗万象的路由“*”，并在 url 不存在时选择要呈现的组件。

【讨论】：