苗条路线给了我 404答案

【问题标题】：Svelte route gives me 404苗条路线给了我 404
【发布时间】：2019-12-11 20:11:28
【问题描述】：

我在 Svelte 中为我的应用创建了一个简单的路由器。如果我从导航栏访问链接，它就可以工作。如果我重新加载页面，它会给我 404.. 为什么？

<Router url="{url}">
 <nav>
   <Link to="/">Home</Link>
   <Link to="charts">About</Link>
 </nav>
 <div>
  <Route path="charts" component="{About}" />
  <Route path="/"><Home /></Route>
 </div>
</Router>

重新加载后：找不到此本地主机页面没有找到该网址的网页：http://localhost:5000/charts

【问题讨论】：

标签： javascript user-interface routing svelte

【解决方案1】：

您必须确保您的服务器为每个路由路径提供index.html 而不仅仅是/。

如果你例如正在将 sirv 与 Svelte 入门项目之一一起使用，您可以将 --single 标志添加到脚本中。

"scripts": {
  "start": "sirv public --single",
  "start:dev": "sirv public --dev --single"
},

【讨论】：

涉及rollup时有解决办法吗？
@LSR 我认为 rollup 在完成构建时会调用 npm run start，所以这样的配置应该可以工作："scripts": {dev": "rollup -c -w", "start": "sirv public --single"}

【解决方案2】：

如上面其中一个cmets中提到的，如果使用roll-up，调用npm run dev时下面的脚本组合会起作用

"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
  }

【讨论】：

【解决方案3】：

这适用于那些想要托管苗条应用程序的人，如果您的托管服务提供商支持添加重定向或重写规则，然后您可以这样做以为路由器可以处理的任何请求提供index.html。

例如，设置源为/*，/指路径，通配符*指匹配任意请求路径。

然后将您的目的地设置为 / 就是这样。不要将目的地设置为/index.html，否则所有请求都会打开您的主页，例如，如果您尝试打开www.example.com/about，那么它将打开www.example.com/index.html

并将操作设置为Rewrite 而不是Redirect

而且这样也解决了刷新站点和直接从浏览器打开网址的问题

【讨论】：

【解决方案4】：

首先，我们将无法访问您的链接，因为它是只能从您的本地计算机访问的本地链接。

但是我的赌注是重定向问题。您正在尝试访问服务器上的 chart 文件，该文件可能不存在，因为您的路由器应该完成这项工作。

您需要配置您的服务器，以便将每个路由重定向到您的索引文件，然后路由器将能够通过分析 url 来完成它的工作。

【讨论】：

【解决方案5】：

改变
"start": "sirv public --no-clear"

到这个 "start": "sirv public -s --no-clear"

在你的 package.json 文件中，它对我有用

【讨论】：