如何从子文件夹运行 Svelte 应用程序？答案

【问题标题】：How to run a Svelte app from a subfolder?如何从子文件夹运行 Svelte 应用程序？
【发布时间】：2021-03-17 22:09:50
【问题描述】：

我在 GitHub 页面中托管了一个苗条的应用程序，因此它从一个子文件夹中提供。问题是所有链接都不再工作了。基本上我需要更改应用程序的基本 URL，但我不知道如何在 svelte 或 rollup 中执行此操作。

附注：我没有使用 Sapper。

【问题讨论】：

【解决方案1】：

您可以为此使用base 元素。

要么直接在你的 index.html 中设置它，要么使用svelte:head 在纤细的应用程序本身中设置它，这样可以根据开发/生产轻松更改它

<svelte:head>
  <base href="BASEURL">
</svelte:head>

要根据环境进行设置，您可以使用环境变量和@rollup/plugin-replace 之类的东西，但我觉得这超出了这个问题的范围。不过你可以看这里Environment variables in svelte + rollup

【讨论】：

玩转基本元素，看起来这适用于诸如<a href="test" 之类的 URL，但对于以斜杠开头的 URL 则不然，<a href="/test"。
如果您在基本元素中使用不同的域，但以斜杠开头的 URL 仍将更改其域。
我已经使用了基本元素，但它不起作用，就像@wp-overwatch.com 所说，以斜杠开头的 URL 不会改变。
从嵌套目录提供静态站点并在 $layout.svelte 中设置基本元素并在 svelte.config.cjs 中设置基本路径时，我遇到了同样的问题。我正在尝试将相对链接设置为“/about”和“/”等路由，它总是将用户发送回域根目录而不是应用根目录，

【解决方案2】：

Svelte-Navigator（路由）- 你可以在这里查看，[https://github.com/mefechoel/svelte-navigator][1]。您可以直接在路由器中设置基本路径，然后它将仅读取具有该基本路径的所有URL。

<Router basepath="/base">
    <Link to="profile">Go to /base/profile</Link>
    <Link to="blog">Go to /base/blog</Link>
    <Route path="blog" component={Blog} />
    <Route path="profile" component={Profile} />
</Router>

这里“/base”是您的子文件夹名称，例如，如果您的 svelte 应用程序在端口 localhost:5000 上运行，则通过设置基本路径，您可以将其更改为 localhost/base

【讨论】：